webpack4 code splitting

demo 代碼點此，webpack4 進行 code splitting 使用 split-chunks-plugin, 開始前先做點準備工作。

start

安裝：

npm i -D webpack webpack-cli
npm i -S lodash

創建 webpack.config.js 進行配置：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js',
  },
  optimization: {
    // code splitting settings
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          // 僅將 node_modules 下的代碼打包進 vendors.js
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.js',
        },
      },
    },
  },
  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

創建 index.js ：

// 引入 lodash
import _ from 'lodash';

console.log(_.chunk(['a', 'b', 'c', 'd'], 2));

打包終端執行 npx webpack進行打包，打開 dist 目錄，可以看見 bundle.js 和 vendors.js，引入的 lodash 被打包到 vendors 中。

公共模塊

如果 index.js 引入了公共模塊，則可以將此模塊進行打包。

修改配置：

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 代碼文件大於 0kb 就進行打包
+     minSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.js',
        },
+       default: {
+         // 公共模塊僅引用 1 次也打包進 common.js
+         minChunks: 1,
+         priority: -20,
+         reuseExistingChunk: true,
+         filename: 'common.js',
+       }
      }
    }
  },
  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

然後創建一個 math.js:

// math.js

export default function add (x, y) {
  return x + y;
}

接著修改 index.js:

// inddex.js

import add  from './math';
console.log(add(1, 2));

執行npx webpack進行打包，打開 dist 目錄，可以看見 math.js 被打包進 common.js 中了。

非同步代碼

打包非同步代碼需要使用 import(...)語法，所以需要配置一下 babel。

安裝：

npm i -D babel-loader @babel/core babel-plugin-dynamic-import-webpack

配置一下 webpack.config.js：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js',
  },
  module: {
    rules: [{
      test: /\.js/,
      use: [{
        loader: 'babel-loader', 
        options: {
          "babelrc": false,
          "plugins": [
            "dynamic-import-webpack"
          ]
        }
      }]
    }]
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          // filename: 'vendors.js',
        },
        default: {
          minChunks: 1,
          priority: -20,
          reuseExistingChunk: true,
          // filename: 'common.js',
        }
      }
    }
  },,
  output: {...},
}

修改 index.js:

// index.js

async function getComponent() {
  const { default: _ } = await import('lodash');
  const element = document.createElement('div');
  element.innerHTML = _.join(['hello', 'world'], '-');
  return element;
}

getComponent().then(element => {
  document.body.appendChild(element);
})

執行打包，可以看見 import(...) 非同步載入的 lodash 被打包成 0.bundle.js。