webpack4 之 Code Splitting

当我们的代码越来越复杂，文件越来越大时，往往会遇到网页加载速度慢的问题。为了提高网页性能，我们可以使用 webpack4 的代码分离（Code Splitting）功能来对代码进行分割，使得页面只需加载所需的代码，提高网页的加载速度。

概念

代码分离（Code Splitting）是将代码分解成多个部分的技术，为了达到以下目标：

1. 减少单个文件的大小；
2. 减少浏览器下载资源的数量，从而减少加载时间；
3. 充分利用浏览器的缓存，减少重复下载。

Webpack 提供了多种代码分离的技术，包括：入口起点（entry point）分离、动态导入（dynamic imports）分离、代码共享（code sharing）分离等。

入口起点分离

入口起点分离（Entry Point Splitting）是将代码分解成多个 bundle 构建输出，因此每个 bundle 都有自己的入口起点。当存在多个页面或多个单页应用时，入口起点分离是很有用的。

在 webpack4 中，入口起点通过 entry 配置项来指定。例如：

// www.javascriptcn.com code example
module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[contenthash].js'
  }
};

上面的配置将会生成两个 bundle：app.[contenthash].js 和 vendor.[contenthash].js。

动态导入分离

动态导入分离（Dynamic Imports Splitting）可以使得一些代码在需要的时候才会被下载。在 webpack4 中，可以使用 import() 函数来实现动态导入分离。例如：

// www.javascriptcn.com code example
async function getComponent() {
  const element = document.createElement('div');
  const { default: _ } = await import('lodash');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
getComponent().then(element => {
  document.body.appendChild(element);
});

上面的代码中，当 getComponent() 函数被调用时，才会下载 lodash 库。

代码共享分离

代码共享分离（Code Sharing Splitting）可以使得多个 bundle 共享同一个 bundle，从而减少代码的重复下载。在 webpack4 中，可以使用 optimization.splitChunks 配置项来实现代码共享分离。例如：

// www.javascriptcn.com code example
module.exports = {
  entry: {
    app: './src/app.js',
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  output: {
    filename: '[name].[contenthash].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'common'
    }
  }
};

上面的配置将会生成 4 个 bundle：app.[contenthash].js、page1.[contenthash].js、page2.[contenthash].js 以及 common.[contenthash].js，其中 common.[contenthash].js 包含了被多个页面所共享的代码。

总结

webpack4 提供了多种代码分离的技术，可以在打包资源过大时有效减小文件体积。使用代码分离技术可以使页面加载速度更快，提高用户体验。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/649d587a48841e9894a1b8df