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

2022-03-20 13:02:00

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

輸出檔案名字/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']
            }
        }
    }
  }
}

再次執行打包你會發現在你打包結果的中會有多了一個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";
              }
          }
        }
    }
  }
}

打包的結果如下，發現好像多了一個css,大小沒有是什麼改變,還變大了

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

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

發現都是一些依賴包，既然是可以列印那我是不是可以返回對於的包的名字，開幹

/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內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

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

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

如何進行設定分割

熱門文章