如何在Webpack 5中针对该单页应用场景进行代码分割？

针对你的单页应用代码分割需求，可通过Webpack 5内置的代码分割能力结合针对性配置实现，具体方案如下：

1. 核心代码拆分 #

核心代码定义为未被任何page.js引用的部分，可通过入口声明+缓存组配置单独打包：

• 在entry中单独声明核心代码入口，比如core: './src/core.js'
• 通过optimization.splitChunks的cacheGroups配置，给核心代码设置最高优先级，确保其被提取为独立文件

2. 页面代码与共享依赖拆分 #

Webpack 5的splitChunks可自动识别并提取共享依赖，需调整配置适配你的场景：

• 设置splitChunks.chunks: 'all'，同时处理同步和异步模块
• 新增pages逻辑（若页面通过路由懒加载则无需手动声明入口，Webpack自动拆分），确保每个页面代码单独打包
• 新增shared缓存组，提取被至少2个页面引用的共享依赖；vendors组处理node_modules中的第三方库

3. 自动加载与重复加载避免 #

• 页面代码中直接导入核心代码或共享依赖即可，Webpack会自动维护chunk的依赖关系，确保核心代码、共享依赖仅加载一次
• 配置runtimeChunk: 'single'，将运行时代码单独打包，既避免缓存失效问题，也保证模块加载逻辑的正确性

完整配置示例 #

const path = require('path');

module.exports = {
  entry: {
    core: './src/core.js', // 核心代码入口
    pageA: './src/pages/pageA.js',
    pageB: './src/pages/pageB.js',
    pageC: './src/pages/pageC.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  optimization: {
    runtimeChunk: 'single', // 单独打包运行时代码
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        core: {
          name: 'core',
          test: /core\.js$/,
          priority: 10, // 最高优先级，确保核心代码独立打包
          enforce: true
        },
        shared: {
          name: 'shared',
          minChunks: 2, // 被至少2个页面引用才提取
          priority: 5,
          reuseExistingChunk: true // 复用已存在的chunk
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 3
        }
      }
    }
  }
};

额外说明 #

• 使用[contenthash]作为文件名后缀，可实现静态资源长期缓存，仅当文件内容变化时更新哈希值
• 若页面采用路由懒加载（如React的lazy/Suspense、Vue异步组件），无需在entry中声明页面，Webpack会自动将懒加载页面打包为独立chunk
• 可借助webpack-bundle-analyzer插件可视化分析打包后的chunk结构，验证代码分割是否符合预期

内容的提问来源于stack exchange，提问作者Andrew Bullock