如何配置webpack为小型静态React页面实现代码分割并优化主包体积

• 配置webpack多入口，将纯静态页面和动态业务页面拆分为两个独立入口，避免依赖互相污染，示例配置：

// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js', // 原有动态业务主入口
    staticPages: './src/static/index.js' // 静态页面专属入口，仅引入所有静态页面和共享的导航、页脚组件
  }
}

• 配置差异化的代码分割规则，仅将静态页面需要的共享依赖打到对应公共chunk中，避免引入多余依赖：

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 静态页面专属公共chunk，仅包含静态页面需要的依赖
        staticCommon: {
          test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|导航页脚用到的小依赖包名)[\\/]/,
          chunks: chunk => chunk.name === 'staticPages',
          name: 'static-common',
          priority: 20,
          enforce: true
        },
        // 动态业务页专属公共chunk，可包含MUI等业务依赖
        mainCommon: {
          test: /[\\/]node_modules[\\/]/,
          chunks: chunk => chunk.name === 'main',
          name: 'main-common',
          priority: 10
        }
      }
    }
  }
}

• 静态页面路由单独维护，不要在主入口的路由表中直接引入静态页面组件，避免webpack将静态页面相关代码打包进主包，可通过react-router的动态加载逻辑仅在匹配到静态路由时加载静态页面chunk。

• 排查所有全页面共享的公共组件（导航、页脚等）依赖，确保这类组件没有引入@material-ui/core等静态页面不需要的大型依赖。如果动态业务页需要用到大型组件库的公共组件，可将公共组件拆分为「全页面通用组件」和「动态业务专用组件」两类，分别引入。
• 禁止全局导入大型组件库，所有组件按需引入：

// 错误写法，会引入整个@material-ui/core库
import { Button } from '@material-ui/core'
// 正确写法，仅引入单个组件
import Button from '@material-ui/core/Button'

如果使用MUI v5及以上版本，可配置babel-plugin-import自动完成按需引入转换，无需手动修改引入路径。

• 安装webpack-bundle-analyzer分析主包依赖组成，将仅在特定业务页用到的依赖全部迁移到对应业务页的chunk中，不要在主入口或者全局公共文件中引入。
• 非核心大型依赖（如图表库、富文本编辑器等）全部使用动态导入加载，不要打包进主包。
• 开启webpack tree shaking功能，在package.json中标记可被tree shaking的依赖为sideEffects: false（注意排除样式文件），移除未使用的冗余代码。

• 可将react、react-dom等稳定的公共依赖改为CDN引入，进一步减小本地打包的chunk体积。
• 开启静态资源的gzip或brotli压缩，可将JS资源体积进一步压缩60%以上。

内容的提问来源于stack exchange，提问作者Jeremy Gottfried