vue3+vite5打包優(yōu)化方式
vue3+vite5打包優(yōu)化
vue3+vite是目前比較成熟的框架。但是在生產(chǎn)環(huán)境還是有很多需要注意的地方。
根據(jù) 配置 Vite | Vite 官方中文文檔 官方文檔，主要可以優(yōu)化的是打包文件大小，組織，兼容性等
經(jīng)過實(shí)際測試可以配置以下選項，主要是build段落，比較坑的是目前很多框架提供的vite.config.js可能都不一定有build段落。
1、主要的配置是rollupOptions
其中注意 input 就是應(yīng)用入口，有些網(wǎng)上的配置的input是main.js對vue3應(yīng)該不適用的，應(yīng)該是 index.html位置才對。
input: {
main: path.resolve(__dirname, './index.html'),
},2、rollupOptions
output 里面根據(jù)官方網(wǎng)站說明，對于打包引用的第三方node_modules，對js 以及靜態(tài)資源進(jìn)行拆分。
output: {
// 可以配置輸出選項
manualChunks(id) {
if (id.includes("node_modules")) {
// 讓每個插件都打包成獨(dú)立的文件
return id .toString() .split("node_modules/")[1] .split("/")[0] .toString();
}
},
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名稱
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名稱
assetFileNames: '[ext]/[name]-[hash].[ext]', // 資源文件像 字體，圖片等
},3、minify配置
minify可以設(shè)置為esbuild, terser, 或者 minify: false （就是輸出的js不進(jìn)行minify,如果打的包有問題可以設(shè)置為minify: false ）
minify: 'terser', // 客戶端默認(rèn)構(gòu)建是esbuild，需安裝terser：`npm i -D terser`
terserOptions: {
// 生產(chǎn)環(huán)境移除console、debugger
compress: {
drop_console: false, // 默認(rèn)false
drop_debugger: true, // 默認(rèn)true
},
},drop_console 這些是打包時去除調(diào)試信息，可以在正式運(yùn)行時去掉，或者設(shè)置false保留控制臺信息。
4、build段落 target
參考官方說明 構(gòu)建生產(chǎn)版本 | Vite 官方中文文檔
target是比較重要的參數(shù)，參考官方設(shè)置。用以提高兼容性。
你也可以通過 build.target 配置項 指定構(gòu)建目標(biāo)，最低支持 es2015。
請注意，默認(rèn)情況下 Vite 只處理語法轉(zhuǎn)譯，且 默認(rèn)不包含任何 polyfill。你可以前往 Polyfill.io 查看，這是一個基于用戶瀏覽器 User-Agent 字符串自動生成 polyfill 包的服務(wù)。
傳統(tǒng)瀏覽器可以通過插件 @vitejs/plugin-legacy 來支持，它將自動生成傳統(tǒng)版本的 chunk 及與其相對應(yīng) ES 語言特性方面的 polyfill。兼容版的 chunk 只會在不支持原生 ESM 的瀏覽器中進(jìn)行按需加載。
一般情況下并不建議使用 @vitejs/plugin-legacy 來支持傳統(tǒng)瀏覽器。
原因：
- legacy插件會導(dǎo)致打包文件增大，不符合生產(chǎn)環(huán)境優(yōu)化。
- 根據(jù)vite文檔，已經(jīng)提供了target 提供瀏覽器兼容性，目前不支持現(xiàn)代javascript的瀏覽器比較少。所以一般盡量不使用legacy插件。
5、對于 vite-plugin-compression 插件的使用
有些框架會使用vite-plugin-compression用于打包時壓縮靜態(tài)資源如js、css，會壓縮為.gz的壓縮文件。該插件是否使用要結(jié)合實(shí)際考慮。
本人并沒用使用 vite-plugin-compression，因?yàn)槿粘Ｊ鞘褂胣ginx，nginx可以配置gzip，配置也比較簡單，使用 vite-plugin-compression好像是多此一舉。
6、關(guān)于 modulepreload 打包后
會有一個比較大的js文件,css里面也有一個預(yù)加載的css文件，里面是預(yù)加載。
預(yù)加載是vite的一個優(yōu)化機(jī)制，但是這個預(yù)加載的js文件又比較大，css的大小適中。
是不是使用預(yù)加載是一個糾結(jié)的問題，可以根據(jù)運(yùn)行環(huán)境考慮。
如果要取消js的預(yù)加載(取消可以減少初次加載的js，減少網(wǎng)頁卡的情況) 可以有兩種方式
1種是取消js組件的所有預(yù)加載，2種是取消部分js組件的預(yù)加載
// 在 build: 段落增加以下配置
modulePreload: { // 取消js模塊的預(yù)加載
resolveDependencies(filename, deps) {
return deps.filter(dep => !dep.endsWith('.js'))
}
},7、增加把打包內(nèi)容壓縮成一個zip文件
便于日常上傳更新操作
安裝 vite-plugin-zip-pack
在vite.config 導(dǎo)入
npm i -D vite-plugin-zip-pack import zipPack from "vite-plugin-zip-pack"
修改加入插件
plugins: [
......
zipPack({
inDir: 'dist',
// outDir: 'archive',
outFileName: `dist.zip`,
// pathPrefix: ''
})
8、以下是一個vite.config主要打包的內(nèi)容示例
export default defineConfig(({ mode, command }) => {
return {
base: VITE_APP_ENV === 'production' ? '/' : '/',
plugins: createVitePlugins(env, command === 'build'),
resolve: {
// https://cn.vitejs.dev/config/#resolve-alias
alias: {
// 設(shè)置路徑
'~': path.resolve(__dirname, './'),
// 設(shè)置別名
'@': path.resolve(__dirname, './src')
},
// https://cn.vitejs.dev/config/#resolve-extensions
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
// 輸出目錄
build: {
outDir: 'dist',
assetsDir: 'assets',
assetsInlineLimit: 4096,
cssCodeSplit: true,
sourcemap: false,
rollupOptions: {
//input: 'src/main.js',
input: {
main: path.resolve(__dirname, './index.html'),
},
output: {
// 可以配置輸出選項
manualChunks(id) {
if (id.includes("node_modules")) {
// 讓每個插件都打包成獨(dú)立的文件
return id .toString() .split("node_modules/")[1] .split("/")[0] .toString();
}
},
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名稱
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名稱
assetFileNames: '[ext]/[name]-[hash].[ext]', // 資源文件像 字體，圖片等
},
},
minify: 'terser', // 客戶端默認(rèn)構(gòu)建是esbuild，需安裝terser：`npm i -D terser`
terserOptions: {
// 生產(chǎn)環(huán)境移除console、debugger
compress: {
drop_console: false, // 默認(rèn)false
drop_debugger: true, // 默認(rèn)true
},
},
chunkSizeWarningLimit: 500,
emptyOutDir: true,
manifest: false,
ssrManifest: false,
target: ["es2015"] // 'modules',// ["es2015", "chrome85"] // 'modules',
},
// vite 相關(guān)配置
server: {
port: 8080,
host: true,
open: true,
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
'/dev-api': {
target: 'http://127.0.0.1:8082',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}
}
},
//fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
css: {
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule) => {
if (atRule.name === 'charset') {
atRule.remove();
}
}
}
}
]
}
},
esbuild: {
// * 打包去除 console.log && debugger
pure: ["console.log", "debugger"]
}
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項目動態(tài)設(shè)置iframe元素高度的操作代碼
在現(xiàn)代Web開發(fā)中,iframe元素常用于嵌入外部內(nèi)容到當(dāng)前網(wǎng)頁中,比如在線文檔、視頻播放器或是廣告,Vue框架提供了強(qiáng)大的工具來解決這個問題,通過動態(tài)設(shè)置iframe元素的高度,我們可以確保頁面布局既美觀又高效,本文給大家介紹了vue項目動態(tài)設(shè)置iframe元素高度的操作2024-10-10
Vue實(shí)現(xiàn)鼠標(biāo)懸浮切換圖片src
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)鼠標(biāo)懸浮切換圖片src，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3的watch功能是Vue生態(tài)系統(tǒng)中一個強(qiáng)大的工具,可以幫助開發(fā)者監(jiān)視數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,這篇文章主要介紹了vue3中watch使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-10-10
e中提供了一種混合機(jī)制--mixins，用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。這篇文章主要介紹了Vue mixin 的用法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
Vue項目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue 2.0雙向綁定原理的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了Ant Design Vue日期組件的時間限制方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue簡單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡單封裝axios插件和接口的統(tǒng)一管理操作,結(jié)合具體實(shí)例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下2020-02-02
v-for是Vue.js中用于循環(huán)渲染元素的指令,非常強(qiáng)大但也需要遵循一些最佳實(shí)踐,下面這篇文章主要介紹了Vue列表渲染v-for用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-03-03
這篇文章主要介紹了vue關(guān)于頁面刷新的幾個方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05