怎么优化装载机

最新推荐文章于 2025-12-17 21:27:18 发布

翻译最新推荐文章于 2025-12-17 21:27:18 发布 · 53 阅读

文章标签：

#前端

文章讨论了如何通过缩小BabelLoader的文件搜索范围和启用代码缓存来提高在处理大量代码时的效率。作者介绍了如何配置Babel-loader以只在特定目录下查找和利用缓存功能来减少重复编译时间。

对于 Loader 来说，预算效率首当其冲必属 Babel 了。因为 Babel 复制代码转为字符串生成 AST（抽象语法树），然后对 AST 继续进行转变最后再生成新的代码，项目更大转换，代码越多，效率就越低。当然了，我们是有办法优化的。

首先我们可以缩小Loader的文件搜索范围

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: "babel-loader",
        // 只在 src 文件夹下查找
        include: [resolve("src")],
        // 不会去查找的路径
        exclude: /node_modules/,
      },
    ],
  },
};

还可以将 Babel 编译过的文件缓存起来，接下来只需要更改编译过的代码文件即可，这样可以节省压缩时间。

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>loader: 'babel-loader?cacheDirectory=true'</code></span></span></span></span>