快捷導(dǎo)航

解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問題

更新時(shí)間：2022年03月20日 10:41:13 作者：井底的蝸牛

本文主要介紹了解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問題，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

打包項(xiàng)目過程中遇到警告 (想看結(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.

由于打包有些依賴包體積過于龐大，提示你進(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" 好像除了變大了其他的沒什么變化，換個(gè)返回值試試

module.exports = {
  build: {
    rollupOptions: {
        output:{
            manualChunks(id) {
              if (id.includes('node_modules')) {
                  return "wq";
              }
          }
        }
    }
  }
}

打包的結(jié)果如下，發(fā)現(xiàn)好像多了一個(gè)css,大小沒有是什么改變,還變大了

打印一下這個(gè)id看看是什么玩意，猜測(cè)應(yīng)該是一些依賴包，因?yàn)槭强从袥]有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í)不是這樣去處理，這是只是視覺上的減小，其實(shí)他只不過是把大文件拆開來分成很多分了而已，沒什么實(shí)質(zhì)性的作用，只是當(dāng)時(shí)我在使用時(shí)遇到情況，才去進(jìn)行處理，如果大佬想要知道怎么處理，可以看一下這篇文章點(diǎn)擊這里，這是我一位大佬進(jìn)行交流把文件進(jìn)行壓縮的方法，使得網(wǎng)站訪問速度大大提高

補(bǔ)充：會(huì)生成大量1kb的文件，反而文件數(shù)量多了不少，如何將所有小文件打包一起？

在之前把文件拆分雖然體積減小了但是文件數(shù)量增多了，既然rollup可以把文件整合，我們把文件拆分，那么我們就可以把單獨(dú)體積大的文件拿出來，其余的文件整合，這樣就可以把那些很小的文件和一起，由于我目前沒有找到可以獲取每個(gè)包文件的大小，只能通過先拆分打包后可以看到具體哪幾個(gè)包體積大，然后把這幾個(gè)包單獨(dú)拿出來處理；當(dāng)然這樣的方法肯定不行，我只提供思路，如果哪位大佬知道如果獲取文件的大小，可以評(píng)論告訴我，謝謝大佬門了

 manualChunks(id) {
                    if (id.includes('node_modules')) {
                        //我這里用到其他包不多，最大的就是element-plus我把它單獨(dú)拿出來，其余的都返回隨便一個(gè)名字，
                        // 和之前沒有配置相比，文件就只會(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問題的文章就介紹到這了,更多相關(guān)vite1.0升級(jí)到2.0內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: