快捷導(dǎo)航

vue-cli3 打包優(yōu)化之 splitchunks詳解

更新時(shí)間：2023年07月06日 11:12:27 作者：DongFuPanda

這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue-cli3 打包優(yōu)化之 splitchunks

Dllplugin 可以把常用庫抽離出來，包括 vue，vuex之類的庫。但是 ant design vue 是按需加載，且隨時(shí)有可能引入新的組件，顯然不適合放進(jìn) dll 中。直接和其他文件打進(jìn) vendor.js 有會(huì)很大，所以需要將其再單獨(dú)抽離出來，我決定在 config.optimization.splitChunks 配置如下：

const IS_PROD = process.env.NODE_ENV === 'production'
module.exports = {
  chainWebpack(config) {
    if (IS_PROD) {
      config.optimization.splitChunks({
        cacheGroups: {
          common: {
            name: 'chunk-common', // 打包后的文件名
            chunks: 'initial', // 
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          antDesignVue: {
            name: 'chunk-ant-design-vue',
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
            chunks: 'initial',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
    }
  }
}

關(guān)于 webpack4 的 splitChunks 還是有很多知識(shí)需要了解的，下文將進(jìn)行簡要的介紹。

splitChunks 常用參數(shù)

name 打包的 chunks 的名字
test 匹配到的模塊獎(jiǎng)杯打進(jìn)這個(gè)緩存組
chunks 代碼塊類型必須三選一： “initial”（初始化） | “all”(默認(rèn)就是 all) | “async”（動(dòng)態(tài)加載）默認(rèn) Webpack 4 只會(huì)對(duì)按需加載的代碼做分割。如果我們需要配置初始加載的代碼也加入到代碼分割中，可以設(shè)置為 ‘all’
priority ：緩存組打包的先后優(yōu)先級(jí)，數(shù)值大的優(yōu)先
minSize （默認(rèn)是30000）形成一個(gè)新代碼塊最小的體積
minChunks （默認(rèn)是1）在分割之前，這個(gè)代碼塊最小應(yīng)該被引用的次數(shù)
maxInitialRequests （默認(rèn)是3）一個(gè)入口最大的并行請(qǐng)求數(shù)
maxAsyncRequests（默認(rèn)是5）按需加載時(shí)候最大的并行請(qǐng)求數(shù)
reuseExistingChunk 如果當(dāng)前的 chunk 已被從 split 出來，那么將會(huì)直接復(fù)用這個(gè) chunk 而不是重新創(chuàng)建一個(gè)
enforce 告訴 webpack 忽略 splitChunks.minSize, splitChunks.minChunks, splitChunks.maxAsyncRequests and splitChunks.maxInitialRequests，總是為這個(gè)緩存組創(chuàng)建 chunks