Babel7 优化之路 —— 输出优化篇-JavaScript中文网-JavaScript教程资源分享门户

Babel 是一个 JavaScript 编译器，可以将 ES6/ES7/ES8 等高版本的 JavaScript 代码转换成 ES5 代码，以便在所有浏览器中运行。在开发中，我们经常使用 Babel 来编译代码，但是编译后的代码可能会存在一些问题，比如体积过大、执行速度慢等。本文将介绍如何使用 Babel7 进行输出优化，以减小编译后代码的体积和提高代码的执行速度。

1. 使用 @babel/preset-env

在 Babel7 中，@babel/preset-env 是一个非常重要的插件，它可以根据当前环境的特性，自动将代码转换成可以运行的代码。它可以根据你的配置，自动选择适合的转换插件，同时也可以根据目标浏览器的版本，自动选择需要的 polyfill。

1.1 配置 @babel/preset-env

在使用 @babel/preset-env 时，需要在 .babelrc 文件中进行配置。如下所示：

-- -------------------- ---- -------
-
  ---------- -
    -
      --------------------
      -
        ---------- -
          ----------- ------ - ---------- --- -- ---
        --
        -------------- --------
        --------- -
      -
    -
  -
-展开代码

其中，targets 字段用于指定目标浏览器的版本，这里使用了 last 2 versions 和 ie >= 9，表示支持最新的两个版本以及 IE9 及以上版本。useBuiltIns 字段用于指定是否使用 polyfill，这里使用了 usage，表示根据代码中使用的特性自动引入需要的 polyfill。corejs 字段用于指定 polyfill 的版本，这里使用了 3 版本。

1.2 压缩代码

在使用 @babel/preset-env 进行编译时，可以使用压缩工具（如 UglifyJS）来进一步压缩代码。在 .babelrc 文件中添加如下配置：

-- -------------------- ---- -------
-
  ---------- -
    -
      --------------------
      -
        ---------- -
          ----------- ------ - ---------- --- -- ---
        --
        -------------- --------
        --------- -
      -
    -
  --
  ---------- ----------------------------
-展开代码

其中，plugins 字段用于指定需要使用的插件。这里使用了 transform-remove-console 插件，用于删除代码中的 console 语句。这样可以进一步减小代码体积。

2. 使用 Tree Shaking

Tree Shaking 是一种去除 JavaScript 代码中未使用部分的技术，可以有效地减小代码体积，提高代码的执行速度。在 Babel7 中，可以使用 @babel/plugin-transform-runtime 插件来实现 Tree Shaking。

2.1 配置 @babel/plugin-transform-runtime

在 .babelrc 文件中添加如下配置：

-- -------------------- ---- -------
-
  ---------- -
    -
      ----------------------------------
      -
        --------- --
        ---------- -----
        -------------- -----
        --------------- ----
      -
    -
  -
-展开代码

其中，corejs 字段用于指定 polyfill 的版本，这里使用了 3 版本。helpers 字段用于指定是否使用 babel-runtime 中的 helper 函数。regenerator 字段用于指定是否使用 babel-runtime 中的 regenerator。useESModules 字段用于指定是否使用 ES6 模块化。

2.2 配置 package.json

在 package.json 文件中，需要将 sideEffects 字段设置为 false。这样可以告诉 webpack，在打包时可以安全地删除未使用的代码。

{
  "sideEffects": false
}

2.3 示例代码

下面是一个使用 Tree Shaking 的示例代码：

import { add } from './utils.js';

console.log(add(1, 2));

其中，./utils.js 文件中的代码如下：

export function add(a, b) {
  return a + b;
}

export function sub(a, b) {
  return a - b;
}

在编译后的代码中，只会保留 add 函数，而 sub 函数会被删除。

结语

以上就是使用 Babel7 进行输出优化的方法，包括使用 @babel/preset-env 和 Tree Shaking。通过优化输出，可以减小代码体积，提高代码的执行速度，从而提高网站的性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cae140e46428fe9e3784f6

Babel7 优化之路 —— 输出优化篇