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。