为什么（Why）

我们知道 Webpack 是⼀款打包⼯具，但现在为什么⼜要进⾏代码分割呢？ 如果把所有代码都打包到⼀起，可能最终的代码⾮常⼤。从⽽影响加载时间。 ⽽且，很多代码是初始加载时，不需要的。因此，我们可以根据代码使⽤的紧急程度， 将代码分割打包 后，按需加载。 例如：打包后的 bundle.js 中，可能包含多个⻚⾯的 js

代码分离-多⼊⼝打包 - 图1

但是，加载⾸⻚（index.js）时，我们不需要加载 about.js。此时，我们就可以进⾏代码分割。

代码分离-多⼊⼝打包 - 图2

怎么做（How）

Webpack 中进⾏代码分割的⽅式有三个：

多⼊⼝打包：配置 entry 加载多个⼊⼝⽂件

提取公⽤模块：optimization.splitChunks.chunks: all

动态导⼊：按需加载 | 预加载

多⼊⼝打包

1. 将 entry 配置为对象的形式

// webpack.config.js module.exports = (env, argv) => { // 单⼊⼝⽂件 // entry: ‘./src/index.js’, // 多⼊⼝打包 entry: { ‘index’: ‘./src/index.js’, ‘about’: ‘./src/about.js’ }, }

2. 修改输出⽂件名

如果输出⽂件名称写成固定的，最后会⽣成⼀个⽂件，就失去了代码分割的意义。 // webpack.config.js module.exports = (env, argv) => { // 出⼝配置 output: { // 输出⽬录（输出⽬录必须是绝对路径） path: resolve(__dirname, ‘output’), // 单⼊⼝输出⽂件名称 // filename: ‘bundle.js’ // 多⼊⼝输出⽂件名称 filename: ‘[name].bundle.js’ }, }

3. 不同⻚⾯（模板）加载各⾃的 bundle

在 HtmlWebpackPlugin 中指定 chunks 配置，表明 index.html 中加载 index.bundle.js， about.html 中加载 about.bundle.js。 如果不指定 chunks，所有⻚⾯默认加载 bundle.js // webpack.config.js module.exports = (env, argv) => { // 插件配置 plugins: [ // Html 的配置 new HtmlWebpackPlugin({ // 指定打包后的⽂件名称 filename: ‘index.html’, // ⽤来指定，⽣成 HTML 的模板 template: ‘./src/index.ejs’, // 指定要加载的打包⽂件 - index.bundle.js chunks: [‘index’] }), new HtmlWebpackPlugin({ // 指定打包后的⽂件名称 filename: ‘about.html’, // ⽤来指定，⽣成 HTML 的模板 template: ‘./src/index.ejs’, // 指定要加载的打包⽂件 - index.bundle.js chunks: [‘about’] }), ] }