解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題

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

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

打包項目過程中遇到警告 (想看結果，可以滑至底部)

輸出文件名字/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.

由于打包有些依賴包體積過于龐大，提示你進行配置分割；

如何進行配置分割

根據提示進入到rollup.js

打開后你會看到一堆英文，還有兩個小小的代碼塊

  manualChunks: {
      lodash: ['lodash']
  }
 
  manualChunks(id) {
      if (id.includes('node_modules')) {
          return 'vendor';
      }
  }

你可以看到 output.manualChunks 這個應該是放在rollup打包配置里面的

module.exports = {
  build: {
    rollupOptions: {
        output:{
            manualChunks: {
                lodash: ['lodash']
            }
        }
    }
  }
}

再次運行打包你會發(fā)現(xiàn) 在你打包結果的中會有多了一個lodash，但是少了之前的vendor的大文件，其他的文件又變大了

輸出文件名字/static/lodash.fe9934f4.js 0.23kb / brotli: 0.12kb

然后你在換個另外一個返回 return "vendor" 好像除了變大了其他的沒什么變化，換個返回值試試

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

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

打印一下這個id看看是什么玩意，猜測應該是一些依賴包，因為是看有沒有node_modules

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

發(fā)現(xiàn)都是一些依賴包，既然是可以打印那我是不是可以返回對于的包的名字，開干

/node_modules/element-plus/lib/index.esm.js

我們直接以"node_modules/"進行分割取第二個

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes('node_modules')) {
                    console.log(id.toString().split('node_modules/')[1])
                    return "aa";
                }
            }
          }
      }
    }
  }

然后在以"/"進行切割取第一個 console.log("值為",id.toString().split('node_modules/')[1].split('/')[0].toString())

最好我們就以分割的值為返回的值就可以了就不會報警告包體積太大了，而且他會把重復的放在同一個名字下不會有重復

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes('node_modules')) {
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
                }
            }
          }
      }
    }
  }

重點在最后：這個文件太大其實不是這樣去處理，這是只是視覺上的減小，其實他只不過是把大文件拆開來分成很多分了而已，沒什么實質性的作用，只是當時我在使用時遇到情況，才去進行處理，如果大佬想要知道怎么處理，可以看一下這篇文章點擊這里，這是我一位大佬進行交流把文件進行壓縮的方法，使得網站訪問速度大大提高

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

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

 manualChunks(id) {
                    if (id.includes('node_modules')) {
                        //我這里用到其他包不多，最大的就是element-plus我把它單獨拿出來，其余的都返回隨便一個名字，
                        // 和之前沒有配置相比，文件就只會多了element-plus和一個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();
                    }
                }

到此這篇關于解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題的文章就介紹到這了,更多相關vite1.0升級到2.0內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: