如何防止 Babel 编译后产生的代码大量膨胀
作为一名前端开发工程师，在进行项目开发的过程中，我们经常会使用 ES6/7 的语法，在实际编译运行时，我们会通过 Babel 工具将 ES6/7 语法转换为 ES5 语法从而支持向前兼容性。但是，在使用 Babel 工具进行编译时，经常会出现编译后代码膨胀的情况，这种情况就会导致我们的页面加载速度过慢，影响用户的体验。那么，如何防止 Babel 编译后产生的代码大量膨胀呢？本篇文章将从以下几个方面进行详细的介绍和指导。
一、按需引入 polyfill
现代浏览器对于一些 ES6/7 的 API 已经支持得很好了，但一些低版本浏览器不支持。Babel 默认会在编译后的代码中的头部引入一个巨大的 polyfill，这个 polyfill 包含了所有需要的 API 的代码，导致编译后的代码会变得非常庞大。所以，我们可以通过插件 babel-preset-env 提供了一个 useBuiltIns 选项，来告诉 Babel 只引入应该的 polyfill。
示例代码：
-- -------------------- ---- -------
-------------- - -
-------- --------------- -
------------ --------
------- --
-------- -
------- ----- -- -- -------- ---- ------- --------
--- -----
---
-
---
--
通过配置 useBuiltIns: 'usage'，会根据代码中使用的新语法，仅仅引入对应需要的 polyfill。corejs: 3 是指定使用哪个版本的 core-js，可以通过这个参数限制文件大小和支持的浏览器版本。
二、删除无用的 polyfill
在使用 polyfill 的时候，我们很可能会引入一些不必要的 polyfill，我们可以通过 babel-plugin-transform-runtime 来避免引入重复的 polyfill。
transform-runtime 默认使用了 babel-runtime，它会将 babel 编译后的代码中所需要的 helpers 和 polyfills 提取到 babel-runtime/module 文件中，re-exports 这个文件，避免了重复的 polyfills 和 helpers 的引入。
示例代码：
module.exports = {
presets: [['@babel/preset-env']],
plugins: [
['@babel/plugin-transform-runtime'],
['@babel/plugin-proposal-class-properties', { loose : true }]
]
};
使用该插件需要注意，在不支持 Promise 的环境下，这样引入的 Promise 对象会与当前环境中的 Promise 对象不同，会导致很多问题。
三、使用 Tree Shaking 技术
Tree Shaking 的作用是在编译和打包时，识别和移除只被引入但未被使用的模块，防止这些模块被打包到最终的代码中，减少代码体积。
示例代码：
// index.js
export const add = (a, b) => a + b;
export const square = (x) => x * x;
// CommonJS modules
const math = require('./math');
math.add(16, 26);
在使用 Tree Shaking 的时候，需要注意：需要在 webpack 的 optimization 中开启 sideEffects 选项。
示例代码：
// webpack.config.js
module.exports = {
optimization: {
usedExports: true,
},
};
此外，在编写代码的时候，还需要注意一些编译出来的冗余代码，例如箭头函数，它会被编译成普通函数，这样容易产生闭包导致代码赘余。
综上，我们可以通过按需引入 polyfill、删除无用的 polyfill 和使用 Tree Shaking 技术来防止 Babel 编译后产生的代码大量膨胀。对于一个大型项目来说，这样做可以有效地减少代码体积，提高页面的加载速度和用户的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca56e2e46428fe9e25dc3f
