随着 ES6 的普及和各大浏览器对 ES6 的支持度越来越高，越来越多的前端开发者开始使用 ES6 语法进行开发。但是，在浏览器兼容性方面，ES6 语法还存在不少问题，这就需要使用到 Babel 这个工具进行转码。
然而，在使用 Babel 进行转码时，我们会发现转码后的代码量明显增多，这给我们的开发与维护都带来了很大的挑战。下面我们就来详细探讨一下，Babel 转码 ES6 语法时遇到的代码量增加问题及解决方案。
问题
以箭头函数为例，一个简单的箭头函数：
const sum = (a, b) => a + b;
用 Babel 转码后的代码为：
"use strict";
var sum = function sum(a, b) {
return a + b;
};我们可以看到，转码后的代码量明显增加，这不仅增加了代码的体积，使代码难以阅读和维护，同时也会影响加载速度，导致页面加载缓慢。
解决方案
针对 Babel 转码后的体积增加问题，我们可以采取以下几种方式进行解决。
1. 按需引用
我们可以按需引用需要的 Babel 插件，不必全部引入，这样就能大大减少编译后的代码量。
以箭头函数为例，我们可以引入 transform-arrow-functions 这个插件：
{
"plugins": [
["transform-arrow-functions", {
"spec": true
}]
]
}这个插件只会把箭头函数转化为普通函数，而不会对其他语法进行转化。这样就能有效减少编译后的代码量。
2. 指定目标浏览器
我们可以使用 Babel 的 @babel/preset-env 插件，来指定目标浏览器，Babel 会自动帮我们根据目标浏览器来进行转化，并剔除不必要的转化。
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "58",
"ie": "11"
},
"useBuiltIns": "usage",
// ... other options
}
]
]
}这里配置 targets 选项，将转码后的代码针对指定浏览器版本进行优化，一定程度上减少了代码量。指定的 useBuiltIns 选项会自动引入需要用到的 polyfill。
3. 启用缓存
Babel 7 引进了缓存功能，可以将编译过的文件缓存起来，下次编译时就不必重新编译。
我们可以在 babel.config.js 文件中进行配置：
module.exports = function(api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}这里启用了 Babel 的缓存功能，能有效减少编译后的代码量，同时也能加快编译速度。
总结
Babel 进行转码时，可能会产生代码体积增加的问题，但我们可以使用以下方式进行解决：
- 按需引用 Babel 插件，减少编译后的代码量；
- 使用
@babel/preset-env插件，指定目标浏览器； - 启用 Babel 的缓存功能。
希望这篇文章能够帮助到大家，更好地解决使用 Babel 时遇到的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b6f54badd4f0e0fff92ba5