面试题：Webpack模块化下的代码分割策略与优化

Question

在Webpack实现模块化的项目里，阐述代码分割的常用策略有哪些，以及如何通过代码分割优化项目的加载性能，同时说明Webpack中实现代码分割的相关插件或配置方式。

Answer 1

代码分割常用策略

1. Entry Points：在 webpack.config.js 中配置多个 entry 入口，每个入口对应一个独立的chunk。例如：

module.exports = {
    entry: {
        app: './src/app.js',
        vendor: './src/vendor.js'
    },
    // 其他配置...
};

这样可以将应用代码和第三方库代码分开打包，浏览器可以并行加载不同的chunk。 2. 动态导入（Dynamic Imports）：使用ES2020的动态 import() 语法。在代码中根据条件动态导入模块，Webpack会自动将这些模块分割成单独的chunk。例如：

button.addEventListener('click', async () => {
    const { default: module } = await import('./module.js');
    module.doSomething();
});

3. 提取公共代码：使用 splitChunks 插件来提取多个chunk之间的公共代码。Webpack会分析所有chunk，找出重复的模块，并将其提取到单独的chunk中。

通过代码分割优化加载性能的方式

1. 减少初始加载体积：通过将不常用的代码分割出去，初始加载的bundle体积变小，从而加快页面的首次渲染速度。例如将一些非首屏必要的功能模块（如用户设置模块）进行动态导入，不在初始加载时包含。
2. 实现并行加载：浏览器可以并行加载多个chunk，提高资源加载效率。如将第三方库和应用代码分开打包成不同chunk，浏览器可以同时请求这两个chunk，而不是顺序加载。
3. 按需加载：利用动态导入，只有在需要时才加载相应的模块，而不是一开始就加载所有代码，提升用户体验。比如一个图片查看器功能，只有用户点击查看图片时才加载相关代码。

Webpack中实现代码分割的相关插件或配置方式

1. splitChunks插件：在 webpack.config.js 的 optimization 配置项中使用 splitChunks。例如：

module.exports = {
    // 其他配置...
    optimization: {
        splitChunks: {
            chunks: 'all',
            name:'vendor',
            minSize: 30000,
            minChunks: 1
        }
    }
};

• chunks：指定哪些chunk进行分割，'all' 表示所有chunk，'async' 只分割异步chunk，'initial' 只分割初始chunk。
• name：分割出来的chunk的名称。
• minSize：表示分割chunk的最小大小，小于该值不会分割。
• minChunks：表示被引用的次数，超过该次数才会分割。

2. Magic Comments：结合动态导入使用魔法注释来指定chunk的名称等。例如：

import(/* webpackChunkName: "my-chunk" */ './module.js')
   .then(module => {
        module.doSomething();
    });

这里的 webpackChunkName 注释可以指定分割出来的chunk的名称，方便代码管理和缓存控制。