面试题：Webpack中如何实现代码分割及它在优化方面的优势

实现代码分割的常见方法

入口起点(entry points)：在 webpack.config.js 中配置多个入口(entry)，每个入口对应不同的业务模块。例如：

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

这样可以将应用代码和第三方库代码分开打包，在页面加载时可以并行加载，提高加载效率。

动态导入(dynamic imports)：通过 import() 语法实现动态导入模块。例如：

button.addEventListener('click', () => {
  import('./module.js').then(module => {
    module.doSomething();
  });
});

Webpack 会自动将 ./module.js 分割成一个单独的 chunk，只有在按钮点击时才会加载该模块，从而实现按需加载，减少初始加载的代码量。

SplitChunksPlugin：Webpack 内置插件，用于提取 chunks 之间共享的模块，将其单独打包。在 webpack.config.js 中配置如下：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

chunks: 'all' 表示对所有类型的 chunks（initial、async、all）都进行代码分割。它会分析所有 chunks，提取出共享模块，生成单独的文件，避免重复加载相同的模块。

对项目性能的优化作用

加载速度
- 减少初始加载体积：动态导入和 SplitChunksPlugin 能将不必要的代码延迟加载或提取公共代码，使初始加载的 bundle 变小，从而加快页面的首次渲染速度。例如，通过动态导入，只有在需要时才加载特定模块，而非一开始就加载所有代码。
- 并行加载：入口起点和 SplitChunksPlugin 分割出的多个文件可以并行加载，充分利用浏览器的并发加载能力，提高整体加载速度。比如将应用代码和第三方库代码分开打包后，浏览器可以同时下载这两个文件。
资源利用
- 避免重复加载：SplitChunksPlugin 提取共享模块，使得这些模块在多个 chunks 中只加载一次，有效避免了重复加载相同代码，提高了资源利用率。例如，多个页面都使用到的第三方库，通过 SplitChunksPlugin 可以将其提取出来，只加载一次。
- 按需加载：动态导入实现了按需加载，只有在实际需要某个模块时才进行加载，避免了加载无用的代码，进一步优化了资源的使用，尤其是对于大型项目中一些不常用的功能模块。

星途面试题库

面试题：Webpack中如何实现代码分割及它在优化方面的优势

知识考点

面试题答案

实现代码分割的常见方法

对项目性能的优化作用