vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法
vite2是一個(gè)非常好用的工具，只是隨著代碼的增多，打包的時(shí)候 vendor-xxxxxx.js 文件也越來(lái)越大，這就郁悶了。
打包時(shí)遇到警告
輸出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)
Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: rollup.js
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
由于打包時(shí)有些依賴包體積過(guò)于龐大，提示你進(jìn)行配置分割；
https://rollupjs.org/guide/en/#outputmanualchunks
尋找解決方案
（好吧，官網(wǎng)是英文的，看不懂）
于是到網(wǎng)上找了一下，發(fā)現(xiàn)了一種解決方法。http://www.fzitv.net/article/241486.htm
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
}
嘗試了一下，確實(shí)可以分成多個(gè)文件，但是問(wèn)題又來(lái)了，分成的文件有大有小，大文件可以接受，但是一堆幾k的小文件看著就煩了，于是又想了想，發(fā)現(xiàn)可以這樣。
build: {
sourcemap: true,
outDir: 'distp', //指定輸出路徑
assetsDir: 'static/img/', // 指定生成靜態(tài)資源的存放路徑
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
const arr = id.toString().split('node_modules/')[1].split('/')
switch(arr[0]) {
case '@kangc':
case '@naturefw':
case '@popperjs':
case '@vue':
case 'axios':
case 'element-plus':
return '_' + arr[0]
break
default :
return '__vendor'
break
}
}
},
chunkFileNames: 'static/js1/[name]-[hash].js',
entryFileNames: 'static/js2/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
},
brotliSize: false, // 不統(tǒng)計(jì)
target: 'esnext',
minify: 'esbuild' // 混淆器，terser構(gòu)建后文件體積更小
}
},
思路
按照模塊分開(kāi)打包，大模塊獨(dú)立打包，小模塊合并打包，這樣就不會(huì)出現(xiàn)一大堆小文件了。
補(bǔ)充
經(jīng)過(guò)不斷嘗試發(fā)現(xiàn)，@kangc（@kangc/v-md-editor）也就是md的編輯器不能單獨(dú)打包，會(huì)報(bào)錯(cuò)。
還有 axios 也不能單獨(dú)打包，會(huì)報(bào)錯(cuò)。
if (id.includes('node_modules')) {
const arr = id.toString().split('node_modules/')[1].split('/')
switch(arr[0]) {
case '@naturefw': // 自然框架
case '@popperjs':
case '@vue':
case 'element-plus': // UI 庫(kù)
case '@element-plus': // 圖標(biāo)
return '_' + arr[0]
break
default :
return '__vendor'
break
}
}
這幾個(gè)可以分開(kāi)打包，其他的遇到再說(shuō)。
到此這篇關(guān)于vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法的文章就介紹到這了,更多相關(guān)vite2打包vendor-xxx.js文件過(guò)大內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能
Vue結(jié)合高德地圖實(shí)現(xiàn)HTML寫(xiě)自定義信息彈窗全過(guò)程
vue?router權(quán)限管理實(shí)現(xiàn)不同角色顯示不同路由
