前言: ??????? 隨著前端應用功能的增加，項目的打包體積也會不斷膨脹，影響加載速度和用戶體驗。本文介紹了幾種常見的打包優化策略，通過Vite和相關插件，幫助減少項目體積、提升性能，優化加載速度。
rollup-plugin-visualizer
rollup-plugin-visualizer插件，是一個可視化工具，以圖表的形式，展示打包結果的模塊構成與體積分布。
安裝：
pnpm add rollup-plugin-visualizer -D
用法：
// vite.config.tsimport?{ visualizer }?from?"rollup-plugin-visualizer";module.exports = {plugins: [visualizer()],
};
pnpm build?一下, 打開生成的stats.html文件。
xlsx?、html2canvas、jspdf，這3個第三方庫占了主要部分。
分包策略
在項目中，xlsx、html2canvas、jspdf，只在對應功能模塊中使用，可以單獨打包出來，用戶使用對應功能，才會下載對應js腳本。
在rollupOptions選項的?manualChunks函數中控制分包邏輯，并配合?experimentalMinChunkSize?屬性，閥值設置為 20 KB，模塊大小，大于20kb的才會單獨打包成chunk。
rollupOptions: {experimentalLogSideEffects:?true,
output: {experimentalMinChunkSize:?20?*?1024,manualChunks:?(id: string) =>?{if?(id.includes('html2canvas')) {return'html2canvas';}if?(id.includes('jspdf')) {return'jspdf';}if?(id.includes('xlsx')) {return'xlsx';}}}
}
build一下，查看控制臺信息。
成功的將這3個第三方庫單獨打包成
chunk，vite默認會把所有靜態資源都打包到assets文件夾，配置chunkFileNames、entryFileNames、assetFileNames將靜態資源分類。
?chunkFileNames:?'static/js/[name]-[hash].js', // 代碼分割后文件名entryFileNames:?'static/js/[name]-[hash:6].js', // 入口文件名assetFileNames:?'static/[ext]/[name]-[hash].[ext]'?// 靜態資源文件名
build一下，打包后到結果：
減少包體積
vite-plugin-remove-console移除consele
安裝：
pnpm add vite-plugin-remove-console -D
用法:
// vite.config.ts
import?{ defineConfig }?from?"vite";
import?vue?from?"@vitejs/plugin-vue";
import?removeConsole?from?"vite-plugin-remove-console";// https://vitejs.dev/config/
export?default?defineConfig({plugins: [vue(), removeConsole()]
});
vite-plugin-compression壓縮代碼
vite-plugin-compression插件壓縮代碼成gzip格式或者br格式，ngixn開啟gizp，http緩存策略。
安裝:
pnpm add vite-plugin-compression -D
配置說明
| 參數 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| verbose | boolean | true | 是否在控制臺輸出壓縮結果 |
| filter | RegExp or (file: string) => boolean | DefaultFilter | 指定哪些資源不壓縮 |
| disable | boolean | false | 是否禁用 |
| threshold | number | - | 體積大于 threshold 才會被壓縮,單位 b |
| algorithm | string | gzip | 壓縮算法,可選 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw'] |
| ext | string | .gz | 生成的壓縮包后綴 |
| compressionOptions | object | - | 對應的壓縮算法的參數 |
| deleteOriginFile | boolean | - | 壓縮后是否刪除源文件 |
用法:
import?viteCompression?from?'vite-plugin-compression';export?default?() => {return?{plugins: [?viteCompression({threshold:?1024?*?20,?algorithm:?'gzip',ext:?'.gz'})]};
};
build一下：
修改壓縮算法，打包成br格式：
import?viteCompression?from?'vite-plugin-compression';export?default?() => {return?{plugins: [?viteCompression({threshold:?1024?*?20,?algorithm:?'brotliCompress',ext:?'.br'})]};
};
打包結果：
br格式，明顯比gzip格式還小。
外鏈CDN
如果條件允許外鏈接CDN，那么使用rollup-plugin-external-globals?插件將外部依賴映射為全局變量，避免將其打包進最終文件，減小文件體積。配合vite-plugin-html?自動注入代碼到HTML文件中。
安裝：
pnpm add vite-plugin-html rollup-plugin-external-globals -D
用法：
import?{ defineConfig }?from'vite';
import?vue?from'@vitejs/plugin-vue';
import?{ createHtmlPlugin }?from'vite-plugin-html';
import?externalGlobals?from'rollup-plugin-external-globals';const?cdn = {
jspdf:?'jspdf',
xlsx:?'XLSX',
html2canvas:?'html2canvas'
};const?externalList =?Object.keys(cdn);const?globals = externalGlobals(cdn);// https://vitejs.dev/config/
exportdefault?defineConfig({
plugins: [vue(),createHtmlPlugin({minify:?true,inject: {data: {jspdfscript:'<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>',xlsxscript:'<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>',html2canvasscript:'<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>'}}})],
build: {rollupOptions: {external: externalList,plugins: [visualizer({?open:?true?}), globals]}}
});
在index.html中使用CDN腳本：
<!doctype?html>
<html?lang="en">
<head><meta?charset="UTF-8"?/><link?rel="icon"?href="/favicon.ico"?/><meta?name="viewport"?content="width=device-width, initial-scale=1.0"?/><title>AIChat</title><%-?xlsxscript?%><%-?jspdfscript?%><%-?html2canvasscript?%>
</head>
<body><div?id="app"></div><script?type="module"?src="/src/main.ts"></script>
</body>
</html>
對比效果：
優化前：1.7MB
優化后：899KB
總結
-
可視化分析：使用?
rollup-plugin-visualizer?直觀查看打包后的模塊大小，找出大體積模塊進行優化。 -
分包策略：通過?
manualChunks?將大依賴庫分離到單獨的chunk，減少首屏加載資源。 -
去除無用 console：利用?
vite-plugin-remove-console?刪除開發環境中的console，減少打包體積。 -
代碼壓縮：通過?
vite-plugin-compression?壓縮代碼為?gzip?或?brotli?格式，減小文件大小。 -
外鏈CDN：使用?
rollup-plugin-external-globals?和?vite-plugin-html?將常用庫通過CDN加載，避免將它們打包到最終文件。
這些優化策略成功將打包體積從1.7MB減少到899KB，提升了應用性能。
