vue3+vite5打包優(yōu)化方式
vue3+vite5打包優(yōu)化
vue3+vite是目前比較成熟的框架。但是在生產(chǎn)環(huán)境還是有很多需要注意的地方。
根據(jù) 配置 Vite | Vite 官方中文文檔 官方文檔，主要可以優(yōu)化的是打包文件大小，組織，兼容性等
經(jīng)過實際測試可以配置以下選項，主要是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)資源進行拆分。
output: {
// 可以配置輸出選項
manualChunks(id) {
if (id.includes("node_modules")) {
// 讓每個插件都打包成獨立的文件
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不進行minify,如果打的包有問題可以設(shè)置為minify: false ）
minify: 'terser', // 客戶端默認構(gòu)建是esbuild，需安裝terser：`npm i -D terser`
terserOptions: {
// 生產(chǎn)環(huán)境移除console、debugger
compress: {
drop_console: false, // 默認false
drop_debugger: true, // 默認true
},
},drop_console 這些是打包時去除調(diào)試信息，可以在正式運行時去掉，或者設(shè)置false保留控制臺信息。
4、build段落 target
參考官方說明 構(gòu)建生產(chǎn)版本 | Vite 官方中文文檔
target是比較重要的參數(shù)，參考官方設(shè)置。用以提高兼容性。
你也可以通過 build.target 配置項 指定構(gòu)建目標，最低支持 es2015。
請注意，默認情況下 Vite 只處理語法轉(zhuǎn)譯，且 默認不包含任何 polyfill。你可以前往 Polyfill.io 查看，這是一個基于用戶瀏覽器 User-Agent 字符串自動生成 polyfill 包的服務(wù)。
傳統(tǒng)瀏覽器可以通過插件 @vitejs/plugin-legacy 來支持，它將自動生成傳統(tǒng)版本的 chunk 及與其相對應(yīng) ES 語言特性方面的 polyfill。兼容版的 chunk 只會在不支持原生 ESM 的瀏覽器中進行按需加載。
一般情況下并不建議使用 @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é)合實際考慮。
本人并沒用使用 vite-plugin-compression，因為日常是使用nginx，nginx可以配置gzip，配置也比較簡單，使用 vite-plugin-compression好像是多此一舉。
6、關(guān)于 modulepreload 打包后
會有一個比較大的js文件,css里面也有一個預(yù)加載的css文件，里面是預(yù)加載。
預(yù)加載是vite的一個優(yōu)化機制，但是這個預(yù)加載的js文件又比較大，css的大小適中。
是不是使用預(yù)加載是一個糾結(jié)的問題，可以根據(jù)運行環(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")) {
// 讓每個插件都打包成獨立的文件
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', // 客戶端默認構(gòu)建是esbuild，需安裝terser：`npm i -D terser`
terserOptions: {
// 生產(chǎn)環(huán)境移除console、debugger
compress: {
drop_console: false, // 默認false
drop_debugger: true, // 默認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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件大全包括（UI組件,開發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實例,Demo示例)
本文為大家分享了網(wǎng)上比較流行的Vue組件,包括UI組件,開發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實例,Demo示例等開源項目,總有一款適合你2018-10-10
vue如何移動到指定位置(scrollIntoView)親測避坑
這篇文章主要介紹了vue如何移動到指定位置(scrollIntoView)親測避坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文通過實例代碼給大家介紹了vue實現(xiàn)底部菜單功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要介紹?vue3?中?computed?的新用法，對比?vue2?中的寫法，讓您快速掌握?vue3?中?computed?的新用法，對函數(shù)式寫法，options?寫法相關(guān)知識感興趣的朋友一起看看吧2021-11-11
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue2 使用 Echarts 創(chuàng)建圖表實例代碼
本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue中數(shù)組常用的6種循環(huán)方法代碼示例
在vue項目開發(fā)中,我們需要對數(shù)組進行處理等問題,這里簡單記錄遍歷數(shù)組的幾種方法,這篇文章主要給大家介紹了關(guān)于vue中數(shù)組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
這篇文章主要介紹了vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了解決vue?eslint開發(fā)嚴格模式警告錯誤的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了VueUse使用及造輪子選擇對比示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08