?專欄介紹
在當(dāng)今數(shù)字化時(shí)代，Web應(yīng)用程序已經(jīng)成為了人們生活和工作中不可或缺的一部分。而要構(gòu)建出令人印象深刻且功能強(qiáng)大的Web應(yīng)用程序，就需要掌握一系列前端技術(shù)。前端技術(shù)涵蓋了HTML、CSS和JavaScript等核心技術(shù)，以及各種框架、庫(kù)和工具。在本專欄中，我們將深入學(xué)習(xí)前端技術(shù)的各個(gè)方面。我們將學(xué)習(xí)如何使用HTML構(gòu)建語(yǔ)義化的網(wǎng)頁(yè)結(jié)構(gòu)，如何使用CSS進(jìn)行樣式設(shè)計(jì)和布局，以及如何使用JavaScript實(shí)現(xiàn)交互功能和動(dòng)態(tài)效果。此外，我們還將介紹各種流行的前端框架和庫(kù)，并學(xué)習(xí)如何使用它們來提高開發(fā)效率和用戶體驗(yàn)。通過學(xué)習(xí)這些內(nèi)容，你將能夠成為一名熟練的前端開發(fā)者，并能夠應(yīng)用這些知識(shí)來構(gòu)建出現(xiàn)代化且高質(zhì)量的Web應(yīng)用程序。讓我們一起開始前端技術(shù)的學(xué)習(xí)之旅吧！
引言
打包優(yōu)化是指通過一系列的技術(shù)手段和策略，對(duì)軟件應(yīng)用進(jìn)行優(yōu)化，以減少打包文件的大小、提高應(yīng)用的加載速度和性能。隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展和應(yīng)用程序的復(fù)雜化，打包優(yōu)化變得越來越重要。本文將介紹一些常見的打包優(yōu)化技術(shù)和策略，以幫助開發(fā)者更好地優(yōu)化自己的應(yīng)用程序。
1. 分析打包文件
1.1. 安裝 rollup-plugin-visualizer 插件
此插件可以展示構(gòu)建時(shí)長(zhǎng)、chunk 數(shù)量及大小，是分析構(gòu)建的絕佳利器。
npm install rollup-plugin-visualizer -D
1.2. 在vite.config.js 引入該插件
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
// ...
// 將 visualizer 插件放到最后的位置
visualizer()
]
})
1.3. chunk分析圖
配置好插件后，執(zhí)行構(gòu)建命令，會(huì)在根目錄下生成一個(gè)stats.html的文件，該文件就是項(xiàng)目打包的chunk分析圖。
2. 靜態(tài)資源與依賴處理
通過構(gòu)建分析找到那些比較大的靜態(tài)資源進(jìn)行處理，比如圖片，movie等文件。
2.1. 檢測(cè)是否使用，未使用到的直接刪除。
2.2. depcheck
通過depcheck找到未使用的依賴進(jìn)行刪除。
3. 代碼分割，大文件分包
3.1. 在 vite.config.js 進(jìn)行配置
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js', // 代碼分割導(dǎo)致的額外的構(gòu)建產(chǎn)物的文件名
entryFileNames: 'static/js/[name]-[hash].js', // 打包入口生成的構(gòu)建結(jié)果
assetFileNames: 'static/[ext]/[name]-[hash].[ext]', // 重命名構(gòu)建后生成產(chǎn)物的名字
manualChunks: (id: string | string[]) => { // 對(duì)node_modules中的依賴進(jìn)行分包
if (id.includes('node_modules')) {
return id
.toString()
.split('node_modules/')[1]
.split('/')[0]
.toString()
}
}
}
}
3.2. 分包效果
上述操作主要對(duì)打包后的文件進(jìn)行歸類，未配置前的打包結(jié)果是所有的js、css、png等都是在static中，全部混在一起?，F(xiàn)在的效果如圖：
manualChunks：
當(dāng)該選項(xiàng)值為函數(shù)形式時(shí)，每個(gè)被解析的模塊都會(huì)經(jīng)過該函數(shù)處理。如果函數(shù)返回字符串，那么該模塊及其所有依賴將被添加到以返回字符串命名的自定義 chunk 中。上述例子會(huì)將node_modules中的依賴以其文件命名創(chuàng)建chunk。
3.3. chunkSizeWarningLimit
vite 打包后的單個(gè)文件默認(rèn)大于500kb會(huì)報(bào)警告。通過設(shè)置chunkSizeWarningLimit可以將修改其大小限制
export default defineConfig({
build: {
chunkSizeWarningLimit: 700, // 單位是KB
}
})
4. 代碼gzip壓縮
4.1. 安裝vite-plugin-compress插件對(duì)文件進(jìn)行g(shù)zip壓縮，減小構(gòu)建包體積。
4.2. 在vite.config.js進(jìn)行配置
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
viteCompression({
verbose: true, // 輸出壓縮成功
disable: false, // 是否禁用
threshold: 10240, // 體積大于閾值會(huì)被壓縮，單位是b
algorithm: 'gzip', // 壓縮算法
ext: '.gz', // 生成的壓縮包后綴
deleteOriginFile: true, // 是否刪除原文件
}),
]
})
4.3. 壓縮效果
打包后的壓縮效果能減小js文件65%左右的大小。6.7MB => 2.5MB
此方法需要配置Nginx開發(fā)gzip功能。
另外因?yàn)闃?gòu)建時(shí)需額外壓縮文件，所以會(huì)增加構(gòu)建時(shí)間。
??注意： 瀏覽器解壓同樣需要時(shí)間，如果不是特別大的文件不建議進(jìn)行壓縮。
5. 按需加載
對(duì)于一些工具依賴，可使用其es版本，通過tree-shaking進(jìn)行優(yōu)化，只打包用到的函數(shù)。
6. 圖片壓縮
6.1. 安裝vite-plugin-imagemin插件進(jìn)行圖片壓縮
npm i vite-plugin-imagemin -D
6.2. 在vite.config.js進(jìn)行配置
import viteImagemin from 'vite-plugin-imagemin'
export default defineConfig({
plugins: [
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7
},
mozjpeg: {
quality: 20
},
pngquant: {
quality: [0.8, 0.9],
speed: 4
},
svgo: {
plugins: [
{
name: 'removeViewBox'
},
{
name: 'removeEmptyAttrs',
active: false
}
]
}
})
]
})
7. CDN加速
7.1. 安裝vite-plugin-cdn-import進(jìn)行cdn加速
npm install vite-plugin-cdn-import -D
7.2. 在vite.config.js中配置
import viteCDNImport from 'vite-plugin-cdn-import'
export default defineConfig({
plugins: [
viteCDNImport({
modules: [
{
name: 'echarts',
var: 'echarts',
path: 'https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js',
}
]
})
]
})
打包后會(huì)在html的head中自動(dòng)添加：
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
這樣可以有效減小項(xiàng)目體積。
總結(jié)
本文介紹了幾種常見的打包優(yōu)化技術(shù)和策略，包括代碼壓縮、文件合并、按需加載、懶加載等。通過對(duì)代碼進(jìn)行壓縮和合并，可以減少打包文件的大??；通過按需加載和懶加載，可以提高應(yīng)用程序的加載速度和性能。此外，還介紹了一些其他的打包優(yōu)化技巧，如使用CDN加速、使用緩存等。這些技術(shù)和策略可以幫助開發(fā)者更好地優(yōu)化自己的應(yīng)用程序，提升用戶體驗(yàn)。在實(shí)際開發(fā)中，開發(fā)者可以根據(jù)具體情況選擇適合自己項(xiàng)目的打包優(yōu)化方案，并結(jié)合性能測(cè)試進(jìn)行調(diào)整和優(yōu)化。通過不斷地學(xué)習(xí)和實(shí)踐，開發(fā)者可以不斷提升自己在打包優(yōu)化方面的能力，為用戶提供更好的應(yīng)用體驗(yàn)。
?? 寫在結(jié)尾
前端設(shè)計(jì)模式專欄
設(shè)計(jì)模式是軟件開發(fā)中不可或缺的一部分，它們幫助我們解決了許多常見問題，并提供了一種優(yōu)雅而可靠的方式來構(gòu)建應(yīng)用程序。在本專欄中，我們介紹了所有的前端設(shè)計(jì)模式，包括觀察者模式、單例模式、策略模式等等。通過學(xué)習(xí)這些設(shè)計(jì)模式，并將其應(yīng)用于實(shí)際項(xiàng)目中，我們可以提高代碼的可維護(hù)性、可擴(kuò)展性和可重用性。希望這個(gè)專欄能夠幫助你在前端開發(fā)中更好地應(yīng)用設(shè)計(jì)模式，寫出高質(zhì)量的代碼。點(diǎn)擊訂閱前端設(shè)計(jì)模式專欄
Vue專欄
Vue.js是一款流行的JavaScript框架，用于構(gòu)建用戶界面。它采用了MVVM（Model-View-ViewModel）的架構(gòu)模式，通過數(shù)據(jù)驅(qū)動(dòng)和組件化的方式，使開發(fā)者能夠更輕松地構(gòu)建交互性強(qiáng)、可復(fù)用的Web應(yīng)用程序。在這個(gè)專欄中，我們將深入探討Vue.js的核心概念、組件開發(fā)、狀態(tài)管理、路由和性能優(yōu)化等方面的知識(shí)。我們將學(xué)習(xí)如何使用Vue.js構(gòu)建響應(yīng)式的用戶界面，并探索其強(qiáng)大的生態(tài)系統(tǒng)，如Vue Router和Vuex、Pinia。通過學(xué)習(xí)這些內(nèi)容，你將能夠成為一名熟練的Vue.js開發(fā)者，并能夠應(yīng)用這些知識(shí)來構(gòu)建復(fù)雜而高效的Web應(yīng)用程序。點(diǎn)擊訂閱Vue專欄文章來源：http://www.zghlxwxcb.cn/news/detail-801595.html
JavaScript（ES6）專欄
JavaScript是一種廣泛應(yīng)用于網(wǎng)頁(yè)開發(fā)和后端開發(fā)的腳本語(yǔ)言。它具有動(dòng)態(tài)性、靈活性和易學(xué)性的特點(diǎn)，是構(gòu)建現(xiàn)代Web應(yīng)用程序的重要工具之一。在這個(gè)專欄中，我們將深入探討JavaScript語(yǔ)言的基本語(yǔ)法、DOM操作、事件處理、異步編程以及常見算法和數(shù)據(jù)結(jié)構(gòu)等內(nèi)容。此外，我們還將介紹ES6（ECMAScript 2015）及其后續(xù)版本中引入的新特性，如箭頭函數(shù)、模塊化、解構(gòu)賦值等。通過學(xué)習(xí)這些內(nèi)容，你將能夠成為一名熟練的JavaScript開發(fā)者，并能夠應(yīng)用這些知識(shí)來構(gòu)建出高質(zhì)量和可維護(hù)的Web應(yīng)用程序。點(diǎn)擊訂閱JavaScript（ES6）專欄文章來源地址http://www.zghlxwxcb.cn/news/detail-801595.html
到了這里，關(guān)于vite 打包優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
