解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問(wèn)題
打包項(xiàng)目過(guò)程中遇到警告 (想看結(jié)果，可以滑至底部)
輸出文件名字/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.
由于打包有些依賴包體積過(guò)于龐大，提示你進(jìn)行配置分割；
如何進(jìn)行配置分割
根據(jù)提示進(jìn)入到rollup.js
打開后你會(huì)看到一堆英文，還有兩個(gè)小小的代碼塊
manualChunks: {
lodash: ['lodash']
}
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
}你可以看到 output.manualChunks 這個(gè)應(yīng)該是放在rollup打包配置里面的
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks: {
lodash: ['lodash']
}
}
}
}
}再次運(yùn)行打包你會(huì)發(fā)現(xiàn) 在你打包結(jié)果的中會(huì)有多了一個(gè)lodash，但是少了之前的vendor的大文件，其他的文件又變大了
輸出文件名字/static/lodash.fe9934f4.js 0.23kb / brotli: 0.12kb
然后你在換個(gè)另外一個(gè)返回 return "vendor" 好像除了變大了其他的沒(méi)什么變化，換個(gè)返回值試試
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return "wq";
}
}
}
}
}
}打包的結(jié)果如下，發(fā)現(xiàn)好像多了一個(gè)css,大小沒(méi)有是什么改變,還變大了
打印一下這個(gè)id看看是什么玩意，猜測(cè)應(yīng)該是一些依賴包，因?yàn)槭强从袥](méi)有node_modules
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
console.log(id,"======")
return "wq";
}
}
}
}
}
}
發(fā)現(xiàn)都是一些依賴包，既然是可以打印那我是不是可以返回對(duì)于的包的名字，開干
/node_modules/element-plus/lib/index.esm.js
我們直接以"node_modules/"進(jìn)行分割 取第二個(gè)
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
console.log(id.toString().split('node_modules/')[1])
return "aa";
}
}
}
}
}
}
然后在以"/"進(jìn)行切割取第一個(gè) console.log("值為",id.toString().split('node_modules/')[1].split('/')[0].toString())
最好我們就以分割的值為返回的值就可以了 就不會(huì)報(bào)警告包體積太大了，而且他會(huì)把重復(fù)的放在同一個(gè)名字下不會(huì)有重復(fù)
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
}
重點(diǎn)在最后：這個(gè)文件太大其實(shí)不是這樣去處理，這是只是視覺(jué)上的減小，其實(shí)他只不過(guò)是把大文件拆開來(lái)分成很多分了而已， 沒(méi)什么實(shí)質(zhì)性的作用，只是當(dāng)時(shí)我在使用時(shí)遇到情況，才去進(jìn)行處理，如果大佬想要知道怎么處理，可以看一下這篇文章 點(diǎn)擊這里，這是我一位大佬進(jìn)行交流把文件進(jìn)行壓縮的方法，使得網(wǎng)站訪問(wèn)速度大大提高
補(bǔ)充：會(huì)生成大量1kb的文件，反而文件數(shù)量多了不少，如何將所有小文件打包一起？
在之前把文件拆分雖然體積減小了但是文件數(shù)量增多了，既然rollup可以把文件整合，我們把文件拆分，那么我們就可以把單獨(dú)體積大的文件拿出來(lái)，其余的文件整合，這樣就可以把那些很小的文件和一起，由于我目前沒(méi)有找到可以獲取每個(gè)包文件的大小，只能通過(guò)先拆分打包后可以看到具體哪幾個(gè)包體積大，然后把這幾個(gè)包單獨(dú)拿出來(lái)處理；當(dāng)然這樣的方法肯定不行，我只提供思路，如果哪位大佬知道如果獲取文件的大小，可以評(píng)論告訴我，謝謝大佬門了
manualChunks(id) {
if (id.includes('node_modules')) {
//我這里用到其他包不多，最大的就是element-plus我把它單獨(dú)拿出來(lái)，其余的都返回隨便一個(gè)名字，
// 和之前沒(méi)有配置相比，文件就只會(huì)多了element-plus和一個(gè)wq的js
if(id.toString().split('node_modules/')[1].split('/')[0].includes('element-plus')){
return 'element-plus'
}else{
return 'wq'
}
// return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}到此這篇關(guān)于解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問(wèn)題的文章就介紹到這了,更多相關(guān)vite1.0升級(jí)到2.0內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹型
本文主要介紹了vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹型，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vant-List-@load事件一直觸發(fā)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無(wú)法賦值的解決方法
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無(wú)法賦值的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺(jué)會(huì)方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue 的異常處理機(jī)制，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
vue計(jì)時(shí)器的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了vue計(jì)時(shí)器的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
element ui 對(duì)話框el-dialog關(guān)閉事件詳解
下面小編就為大家分享一篇element ui 對(duì)話框el-dialog關(guān)閉事件詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Element Input輸入框的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?
這篇文章主要給大家介紹了關(guān)于web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01