webpack 项目优化（二）

---

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

• 使用 SWC 更换 Babel
  
  
  
  • SWC（Speedy Web Compiler）是基于 Rust 的 JavaScript 编译器，编译速率比 Babel 快 20 倍以上。
    
  1. // 安装 @swc/core 和 swc-loader
  2. module: {
  3.   rules: [{
  4.     test: /\.js$/,
  5.     use: { loader: 'swc-loader' } // 替代 babel-loader
  6.   }]
  7. }

  复制代码
• 使用 esbuild 压缩代码
  
  
  
  • 用 esbuild 更换 Terser 压缩 JS/CSS，速率提升明显。
    
  1. const { ESBuildMinifyPlugin } = require('esbuild-loader');
  2. optimization: {
  3.   minimizer: [new ESBuildMinifyPlugin({ target: 'es2015' })]
  4. }

  复制代码

---

二、分包计谋进阶

• 预编译资源分包（更换 DLL）
  
  
  
  • Webpack 5 保举使用 cacheGroups 更换过期的 DLL 插件，但针对超大第三方库（如 monorepo 场景）可手动分包：
    
  1. splitChunks: {
  2.   cacheGroups: {
  3.     antd: {
  4.       test: /[\\/]node_modules[\\/](antd|@ant-design)[\\/]/,
  5.       name: 'antd-chunk',
  6.       priority: 20
  7.     }
  8.   }
  9. }

  复制代码
• 预加载与预渲染（Runtime 优化）
  
  
  
  • 联合 import(/* webpackPrefetch: true */ './module') 实现资源预加载，优化用户体验。
    
  
  

---

三、资源加载计谋优化

• 字体文件按需加载
  
  
  
  • 使用 subset 工具（如 fontmin-webpack）裁剪字体文件，仅生存项目中使用的字符集。
    
  1. // 示例配置（需安装 fontmin-webpack）
  2. plugins: [
  3.   new FontminPlugin({
  4.     autodetectText: text => [...new Set(text)].join('')
  5.   })
  6. ]

  复制代码
• Base64 内联小文件
  
  
  
  • 对小于 10KB 的图片/SVG 自动转为 Base64，淘汰 HTTP 哀求：
    
  1. {
  2.   test: /\.(png|svg)$/,
  3.   type: 'asset/inline',
  4.   parser: { dataUrlCondition: { maxSize: 10 * 1024 } }
  5. }

  复制代码

---

四、环境与设置优化

• 区分开发/生产环境设置
  
  
  
  • 使用 webpack-merge 分离环境设置，克制生产环境包罗开发工具（如 Redux DevTools）。
    
  1. // webpack.prod.js
  2. module.exports = merge(baseConfig, {
  3.   mode: 'production',
  4.   devtool: 'source-map'
  5. });

  复制代码
• NPM 依靠分析
  
  
  
  • 使用 npm ls --depth=10 或 yarn why <package> 查抄重复依靠，淘汰冗余代码。
    
  
  

---

五、构建流程增补优化

• 清算构建残留文件
  
  
  
  • 使用 clean-webpack-plugin 确保每次构建前清空输出目次：
    
  1. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  2. plugins: [new CleanWebpackPlugin()]

  复制代码
• 启用 HTTP/2 服务推送（开发环境）
  
  
  
  • 在 devServer 中设置 HTTP/2，提升当地开发资源加载服从：
    
  1. devServer: {
  2.   http2: true,
  3.   https: true // HTTP/2 需要 HTTPS
  4. }

  复制代码

---

六、框架级优化

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

---

七、监控与自动化

• CI/CD 集因素析
  
  
  
  • 在连续集成中接入 webpack-bundle-analyzer，每次构建后天生陈诉存档。
    
  
  
• 自界说性能阈值
  
  
  
  • 设置构建体积和速率的阈值，超出时停止流程并告警：
    
  1. performance: {
  2.   hints: 'error',
  3.   maxAssetSize: 500 * 1024, // 单个文件最大 500KB
  4.   maxEntrypointSize: 1000 * 1024 // 入口文件最大 1MB
  5. }

  复制代码

---

八、冷门但有用的本事

• 禁用 sourceMap 开发依靠
  
  
  
  • 生产环境彻底关闭 sourceMap（或使用 hidden-source-map 仅生存错误追踪）。
    
  
  
• 优化 resolve 设置
  1. resolve: {
  2.   alias: { '@': path.resolve(__dirname, 'src') }, // 缩短引用路径
  3.   extensions: ['.js', '.jsx'], // 减少文件后缀搜索
  4.   symlinks: false // 禁用软链接解析（适用于 monorepo）
  5. }

  复制代码
• Polyfill 按需加载
  
  
  
  • 通过 browserslist 指定目的欣赏器范围，联合 core-js 的 usage 模式自动按需注入 Polyfill。
    
  
  

---

优化结果验证

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

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