webpack4.29.x成神之路（十七） 代碼分割(code spliting)下

目錄

上節： 代碼分割(code spliting)中

上節目錄以下：

前兩節代碼分割只用到了splitChunks中的chunks屬性，如今來看下其它屬性

魔法註釋

先來打個包，npm run build：

能夠看到lodash打包後的名字是vendors~lodash，這其實跟src/index.js中的一段註釋有關：

如今刪掉這段註釋再打包：

就默認用[id]命名了，這就是魔法註釋的做用，還有其它魔法註釋如：
/ webpackPrefetch: true / 這段表示改模塊開啓Prefetch預加載<link rel="prefetch" href="verdor~main.js">
/ webpackPreload: true / 這段表示改模塊開啓Preload預加載<link rel="preload" href="verdor~main.js">

修改輸出文件名

雖然魔法註釋能影響輸出的文件名，但卻不能徹底控制，好比我就想讓輸出的文件名叫lodash呢？
先恢復魔法註釋，而後修改webpack/webpack.prod.js:

// 省略
optimization: {
    // 配置代碼分割
    splitChunks: {
      cacheGroups: {
        vendors: false,
        default: false
      } 
    }
  }
// 省略

再打包：

這樣就沒有vendor~前綴了。

splitChunks其它屬性

先看下splitChunks的默認屬性：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

屬性不少，官網傳送

這裏註釋一下這些默認屬性的意思：

splitChunks: { // 代碼分隔配置
       /*
       * 選擇要進行分割的包
       * 可選值： all（推薦）, async(默認，只分隔異步代碼), and initial(只分割同步代碼)
       * 還能夠傳入函數精確控制
       * chunks (chunk) {
            // exclude `my-excluded-chunk`
            return chunk.name !== 'my-excluded-chunk';
          }
       * */
       chunks: 'all',

       // 默認，大於30k的包才作代碼分割
       minSize: 30000,

       // 默認，分割出來的每一個包最大size，
       // 好比設爲50000（50kb），那若是某個包分離出來後超過50kb，就會進行再分割，保證每一個文件都不超過50kb
       maxSize: 0,

       // 默認，至少被引入一次就進行代碼分隔
       minChunks: 1,

       // 默認，瀏覽器最多並行請求5個js文件,也就是說，分割數量超過5個時，就會中止代碼分割了
       maxAsyncRequests: 5,

       // 默認，對於入口文件最多隻分割3個js包，超過3個就中止
       maxInitialRequests: 3,

       // 默認，文件名鏈接符
       automaticNameDelimiter: '~',

       // 默認，分割後的文件名將根據chunks和cacheGroups自動生成名稱。
       name: true,

       cacheGroups: {
        vendors: {  // vendors是組名

          // 默認，只對node_modules裏的代碼進行分隔
          test: /[\\/]node_modules[\\/]/,

          /*
            默認，每一個組都會有個優先級，
            若是某個包知足多個組的test規則，就按優先級來判斷歸哪一個組
            數值越大，優先級越高
          */
          priority: -10,

          // 分割後的文件名（默認是：組名~入口名.js，即verdors~main.js）
          filename: 'vendors.js',

          // 強制分隔，無視minChunks、maxAsyncRequests等選項，默認false
          enforce: true
        }
      },


      default: {  // default是組名, 分隔不在node_modules裏的代碼
        minChunks: 2,   // 默認
        priority: -20,    // 默認

        /*
          複用已存在的chunk,
          好比index.js裏引入axios和test.js
          test裏也引入了axios，那麼axios就會被複用
        */
        reuseExistingChunk: true
      },

      /*
      * 將項目全部css打包到一個文件中
      * 還能夠分入口打包：https://webpack.js.org/plugins/mini-css-extract-plugin
      * */
      styles: {
        name: 'styles',
        test: /\.less$/,
        chunks: 'all',
        enforce: true,
      }
     }
   }

下節：懶加載