Babel 编译后文件体积变大?几种解决方式

阅读时长 6 分钟读完

背景

随着前端技术的不断发展,现代前端开发中经常使用编译器对高级语言(如 ES6 或 TypeScript)进行编译,以便在较早的浏览器中实现新功能。Babel 是最常见的 JavaScript 编译器之一。

然而,有时候使用 Babel 编译后会发现文件体积变大,这不仅会增加网页加载时间,还浪费带宽资源。本文将介绍几种解决方式,帮助前端开发人员解决这个问题。

解决方式

1. 配置 Babel

a. 只编译需要的功能

Babel 支持通过配置文件来限制编译的范围。可以根据需要选择要编译的功能,以减小输出文件的体积。例如,在 .babelrc 中添加如下配置:

-- -------------------- ---- -------
-
  ---------- -
    ------- -
      ---------- ------
      ---------- -
        ----------- --- ---- ----- - ---------- ---- -- -- ---
      -
    ---
    -------
  --
  ---------- -
    ----------------------------
  -
-

这个配置文件 限制了 Babel 编译的目标浏览器版本(排除 IE8 及以下)和不转换 AMD/CJS 模块语法,只编译 ES6 语法和部分 JSX/TC39 提案。

b. 使用压缩工具

使用压缩工具可以进一步减小编译后文件的体积。可以在 .babelrc 中添加如下配置:

-- -------------------- ---- -------
-
  ---------- -
    ------- -
      ---------- ------
      ---------- -
        ----------- --- ---- ----- - ---------- ---- -- -- ---
      -
    ---
    -------
  --
  ---------- -
    -----------------------------
    -------- -- -- ------ --- ---- -----------------------
  -
-

这个配置文件将代码压缩成一行,以减小文件体积。

2. 使用 webpack

使用 webpack 可以对 Babel 编译的结果进行进一步优化。 webpack 可以通过配置插件来减小文件大小,从而加快网页加载速度。可以在 webpack.config.js 中添加如下配置:

-- -------------------- ---- -------
----- -------------- - -----------------------------------

-------------- - -
  ------ -------------
  ------- -
    --------- ----------------
  --
  ------- -
    ------ -
      -
        ----- --------
        -------- ----------------------------------
        ---- -
          ------- ---------------
          -------- -
            -------- -------- - -------- ----- --- ---------
            -------- -------------------------------
          --
        --
      --
    --
  --
  -------- -
    --- -----------------
  --
--

这个配置文件使用 UglifyJSPlugin 插件压缩代码、使用 babel-loader 对 ES6 语法进行编译,并使用 transform-class-properties 插件将类的属性转换为 ES5 语法。

3. 使用 tree shaking

注意: 这个方法只适用于 Webpack2 及更高版本。

Tree shaking 可以通过消除未使用的代码来减小文件大小。可以在 webpack.config.js 中添加如下配置:

-- -------------------- ---- -------
----- -------------- - -----------------------------------

-------------- - -
  ------ -------------
  ------- -
    --------- ----------------
  --
  ------- -
    ------ -
      -
        ----- --------
        -------- ----------------------------------
        ---- -
          ------- ---------------
          -------- -
            -------- -------- - -------- ----- --- ---------
            -------- -------------------------------
          --
        --
      --
    --
  --
  -------- -
    --- -----------------
  --
  ------------- -
    ------------ -----
    ------------ -----
  --
--

这个配置文件使用 optimization.usedExports 选项来标记未使用的代码,使用 optimization.sideEffects 选项来删除无副作用代码。这样可以更全面地优化代码。

例子

下面的例子是一个简单的 React 应用,使用了 Babel 进行编译,输出文件大小为 156KB。

-- -------------------- ---- -------
------ ----- ---- --------

----- --- - -- ----- -- -- -
  -----
    ----------------
    --------- ----------
  ------
--

----------------
  ---- ------------- ------- ---
  -------------------------------
--

在添加上述配置项后重新进行编译,输出文件大小减小到了 30KB 左右。

结论

本文介绍了几种可以减小 Babel 编译后文件体积的方式,针对不同的场景可以采取不同的方法。请根据具体情况进行选择,以便获得最佳的编译结果。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6707ae2bd91dce0dc86b585a

纠错
反馈