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

這篇文章將為大家詳細講解有關(guān)如何解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

打包項目過程中遇到警告 (想看結(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ù)提示進入到rollup.js

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

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

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

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

再次運行打包你會發(fā)現(xiàn) 在你打包結(jié)果的中會有多了一個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";
              }
          }
        }
    }
  }
}

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

打印一下這個id看看是什么玩意，猜測應(yīng)該是一些依賴包，因為是看有沒有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())

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

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

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

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

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

 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();
                    }
                }

關(guān)于“如何解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。