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

Dllplugin 可以把常用庫抽離出來，包括 vue，vuex之類的庫。但是 ant design vue 是按需加載，且隨時有可能引入新的組件，顯然不適合放進 dll 中。直接和其他文件打進 vendor.js 有會很大，所以需要將其再單獨抽離出來，我決定在 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 還是有很多知識需要了解的，下文將進行簡要的介紹。

splitChunks 常用參數(shù)

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

vue cli3安裝教程

Vue CLI 3是一個基于Vue.js的標(biāo)準(zhǔn)化工具，用于快速構(gòu)建Vue.js項目。它的安裝非常簡單，本文將介紹如何安裝Vue CLI 3。

首先，我們需要確保已經(jīng)安裝了Node.js和npm。如果您還沒有安裝，請先下載并安裝Node.js，然后npm也將自動安裝。

接下來，我們可以使用以下命令安裝Vue CLI 3：

npm install -g @vue/cli

這將全局安裝Vue CLI 3，以后就可以在任何位置使用Vue CLI 3來創(chuàng)建Vue.js項目了。

安裝完成后，您可以使用以下命令檢查是否成功安裝了Vue CLI 3：

vue --version

如果成功安裝，則您應(yīng)該能夠看到Vue CLI 3的版本號。

現(xiàn)在，我們已經(jīng)成功安裝了Vue CLI 3，可以使用它來創(chuàng)建新的Vue.js項目了。您可以使用以下命令創(chuàng)建一個新的Vue.js項目：

vue create my-project

這將創(chuàng)建一個名為“my-project”的新Vue.js項目，并在其中初始化所有必需的文件和依賴項。

以上就是安裝Vue CLI 3的簡單教程。如果您想要更深入地了解Vue CLI 3的詳細(xì)用法和功能，請查看Vue CLI 3的官方文檔。

到此這篇關(guān)于vue-cli3 打包優(yōu)化之 splitchunks的文章就介紹到這了,更多相關(guān)vue-cli3 打包優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論