webpack 项目优化（二）

一、编译工具替换（突破传统性能瓶颈）

1. 使用 SWC 替代 Babel

   • SWC（Speedy Web Compiler）是基于 Rust 的 JavaScript 编译器，编译速度比 Babel 快 20 倍以上。

   // 安装 @swc/core 和 swc-loader
   module: {
     rules: [{
       test: /\.js$/,
       use: { loader: 'swc-loader' } // 替代 babel-loader
     }]
   }
   

2. 使用 esbuild 压缩代码

   • 用 esbuild 替代 Terser 压缩 JS/CSS，速度提升显著。

   const { ESBuildMinifyPlugin } = require('esbuild-loader');
   optimization: {
     minimizer: [new ESBuildMinifyPlugin({ target: 'es2015' })]
   }
   

二、分包策略进阶

1. 预编译资源分包（替代 DLL）

   • Webpack 5 推荐使用 cacheGroups 替代过时的 DLL 插件，但针对超大第三方库（如 monorepo 场景）可手动分包：

   splitChunks: {
     cacheGroups: {
       antd: {
         test: /[\\/]node_modules[\\/](antd|@ant-design)[\\/]/,
         name: 'antd-chunk',
         priority: 20
       }
     }
   }
   

2. 预加载与预渲染（Runtime 优化）

   • 结合 import(/* webpackPrefetch: true */ './module') 实现资源预加载，优化用户体验。

三、资源加载策略优化

1. 字体文件按需加载

   • 使用 subset 工具（如 fontmin-webpack）裁剪字体文件，仅保留项目中使用的字符集。

   // 示例配置（需安装 fontmin-webpack）
   plugins: [
     new FontminPlugin({
       autodetectText: text => [...new Set(text)].join('')
     })
   ]
   

2. Base64 内联小文件

   • 对小于 10KB 的图片/SVG 自动转为 Base64，减少 HTTP 请求：

   {
     test: /\.(png|svg)$/,
     type: 'asset/inline',
     parser: { dataUrlCondition: { maxSize: 10 * 1024 } }
   }
   

四、环境与配置优化

1. 区分开发/生产环境配置

   • 使用 webpack-merge 分离环境配置，避免生产环境包含开发工具（如 Redux DevTools）。

   // webpack.prod.js
   module.exports = merge(baseConfig, {
     mode: 'production',
     devtool: 'source-map'
   });
   

2. NPM 依赖分析

   • 使用 npm ls --depth=10 或 yarn why <package> 检查重复依赖，减少冗余代码。

五、构建流程补充优化

1. 清理构建残留文件

   • 使用 clean-webpack-plugin 确保每次构建前清空输出目录：

   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   plugins: [new CleanWebpackPlugin()]
   

2. 启用 HTTP/2 服务推送（开发环境）

   • 在 devServer 中配置 HTTP/2，提升本地开发资源加载效率：

   devServer: {
     http2: true,
     https: true // HTTP/2 需要 HTTPS
   }
   

六、框架级优化

1. React/Vue 专项优化
   • React：使用 @loadable/component 实现更细粒度的代码分割。
   • Vue：通过 unplugin-vue- 使用 unocss或tailwindcss` 生成按需使用的原子化 CSS，减少冗余样式。

七、监控与自动化

1. CI/CD 集成分析
   • 在持续集成中接入 webpack-bundle-analyzer，每次构建后生成报告存档。
2. 自定义性能阈值
   • 设置构建体积和速度的阈值，超出时中断流程并告警：

   performance: {
     hints: 'error',
     maxAssetSize: 500 * 1024, // 单个文件最大 500KB
     maxEntrypointSize: 1000 * 1024 // 入口文件最大 1MB
   }
   

八、冷门但有效的技巧

1. 禁用 sourceMap 开发依赖
   • 生产环境彻底关闭 sourceMap（或使用 hidden-source-map 仅保留错误追踪）。
2. 优化 resolve 配置

   resolve: {
     alias: { '@': path.resolve(__dirname, 'src') }, // 缩短引用路径
     extensions: ['.js', '.jsx'], // 减少文件后缀搜索
     symlinks: false // 禁用软链接解析（适用于 monorepo）
   }
   

3. Polyfill 按需加载
   • 通过 browserslist 指定目标浏览器范围，结合 core-js 的 usage 模式自动按需注入 Polyfill。

优化效果验证

• 构建速度对比：使用 speed-measure-webpack-plugin 量化优化前后的差异。
• 产物体积监控：接入 Lighthouse CI 或自建监控平台，长期跟踪关键指标（如 TTI、FCP）。

通过组合使用上述策略，可覆盖从代码编译到资源加载的全链路优化，尤其适合中大型项目或对性能要求极高的场景。