转译配置实战：解决项目中常见的构建难题

Newb.圆圆发布于 2026-03-18 01:30:51 工具阅读 1,788

原创

本文链接：https://www.jztheme.com/blog/tool/36425.html

Newb.圆圆

赞 28 收藏反馈

优化前：卡得不行

项目上线前做性能测试，首页加载直接 5 秒起步，热更新编译要等快 10 秒，开发体验烂到不想碰。最离谱的是，每次改一行代码，HMR 要转好久才生效，浏览器都快刷新出感情了。同事说我这不是开发环境，是冥想环境——等编译就是在修行。

生产构建更别提，CI/CD 流水线经常超时，打包时间稳定在 40s 左右，部署频率直接被劝退。这种速度别说优化用户体验了，连开发者自己都用不下去。

一开始我以为是组件太重、图片太多，结果一通操作下来发现，真正的问题出在转译配置上。我用的是 Babel + Webpack，默认配了一堆 preset 和 plugin，看着挺标准，实则全是冗余转译。

找到病根了！

先上 Chrome DevTools 的 Performance 面板录了一段 HMR 更新过程，发现主线程有大量 babel.transformSync 调用，持续占用 CPU。然后切到 Webpack Bundle Analyzer 看产物，发现很多 ES6+ 语法明明现代浏览器都支持了，还被转成了 var、polyfill 塞进去。

比如一个简单的箭头函数：

const greet = () => 'hello'

硬生生被转成：

var greet = function greet() {
  return 'hello';
};

这谁受得了？而且每个文件都来一遍，积少成多，编译时间直接爆炸。

我还试了 esbuild-loader 和 swc-loader 替换 babel-loader，确实快了些，但兼容性问题一堆，某些 plugin 不支持，改完跑不起来，折腾半天又回退了。

最后意识到：不是工具不行，是我配置太糙了。不该转的全转了，该缓存的没缓存，target 写了个 browserslist:production 就完事，根本没细调。

动刀：精准转译 + 缓存策略

核心思路就两个：按需转译、充分利用缓存。

首先明确目标运行环境。我们业务只支持现代浏览器（Chrome >= 80, Safari >= 14），那完全没必要为 IE 兼容买单。于是我把 Babel 的 targets 改得更激进：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "80",
          "safari": "14"
        },
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true }
      }
    ]
  ]
}

关键点在 "modules": false —— 让 Webpack 自己处理模块系统，避免 Babel 多一次转换。同时 useBuiltIns: "usage" 按需引入 polyfill，而不是全量打进去。

然后是缓存。之前 .babelrc 改了没加缓存配置，loader 每次都重新跑。加上 cacheDirectory 和 cacheCompression：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            cacheCompression: false // 开发环境关掉压缩，提升读取速度
          }
        }
      }
    ]
  }
};

这里注意我踩过好几次坑：cacheCompression 默认是 true，会把缓存文件 gzip 压缩，听起来省空间，但读写反而慢，尤其在 SSD 上差别明显。关掉之后，热更新编译时间立竿见影降了 1.2s 左右。

再往下，我发现 node_modules 里的包其实大部分已经是编译过的，没必要全走 babel-loader。于是加了个更细粒度的排除规则：

{
  test: /.js$/,
  use: 'babel-loader',
  include: [
    path.resolve(__dirname, 'src'),
    // 只对特定依赖转译，比如用了 ES6+ 但没编译发布的库
    /node_modules[/\]some-library/
  ]
}

有些第三方库用了可选链、空值合并这些新语法，但发布时没转译，浏览器直接报错。这种就得单独拎出来处理，不能一刀切 exclude node_modules。