面试题：Webpack多入口多出口场景下的代码拆分与公共模块提取

Question

在大型项目中使用Webpack多入口多出口时，如何通过代码拆分来优化加载性能，尤其是针对公共模块的提取。例如项目中有三个入口页面home、product、contact，存在一些公共的库和样式文件，详细说明实现思路及Webpack配置要点。

Answer 1

实现思路

1. 公共模块提取：利用Webpack的代码拆分功能，将多个入口页面中共同依赖的库和样式文件提取出来，形成单独的chunk。这样在加载页面时，公共模块只需加载一次，后续页面加载时直接从缓存中获取，提高加载效率。
2. 动态导入：对于非首屏渲染必须的模块，采用动态导入（import()）的方式，实现按需加载，减少初始加载的文件体积。

Webpack配置要点

1. entry：配置多个入口，例如：

entry: {
  home: './src/home.js',
  product: './src/product.js',
  contact: './src/contact.js'
}

2. output：配置输出路径和文件名，确保每个入口生成对应的输出文件，例如：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[chunkhash].js'
}

3. optimization.splitChunks：使用splitChunks进行公共模块提取。

optimization: {
  splitChunks: {
    chunks: 'all',
    name: 'common',
    minSize: 30000,
    minChunks: 2
  }
}

• chunks: 'all'表示对所有类型的chunk（包括初始chunk、异步chunk）都进行拆分。
• name指定公共模块的名称为common。
• minSize表示被拆分出来的模块最小大小为30000字节，可根据项目情况调整。
• minChunks表示至少被2个chunk引用才会被拆分出来。

4. CSS处理：如果有公共样式，可使用MiniCssExtractPlugin插件提取CSS。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css'
    })
  ]
}

这样，公共样式也会被提取到单独的CSS文件中，实现优化加载。