背景
随着前端技术的不断发展，现代前端开发中经常使用编译器对高级语言（如 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