Babel优化项目如何才能事半功倍？

Babel优化项目有哪些独家秘籍？

项目优化，一直都是技术项目中的热门话题。对于现在前后端分离开发来说，打包工具也成为了前端必备工具。当下流行的打包工具比较多，比如 Webpack 、Rollup、Parcel 等等，每个工具都有各自的使用场景，可根据项目的需要和特点来选用。
Babel 作为一款重量级转换器，一直都是前端界的大佬级别人物，对于 ES6 转 ES5，React、Vue 等诸多框架的转码都有非常重要的作用。

优化方向

Babel 优化项目的方向主要包括以下两点：

• 减少项目文件体积： 项目体积的减少，可分为以下两步：

  • 使用 Tree Shaking： 它用于清除项目中未使用的代码，开启它后，可能会出现一些问题：1. 第三方库，比如 Moment，代码中有用，但是由于使用的时候，可能只是用了某个模块，所以 Tree Shaking 可能会把它清除。解决办法是安装 @babel/plugin-transform-runtime，并指定按需加载。2. 会出现死代码，使用 @babel/plugin-transform-dead-code-elimination，可以清除掉死代码。

  • 使用 Scope Hoisting： 它允许将局部变量声明提升到块级作用域的顶部，从而允许 V8 在整个作用域范围内内联变量，从而减少变量查找成本，最终提升性能。

• 设置访问公共函数，避免创建重复函数方法（也是间接减少体积）：

  • 使用代码拆分： 利用 Webpack 提供的代码拆分功能，可以将项目中的代码拆分成多个文件，从而减少每个文件的大小，提升加载速度。

测试环境搭建

本次，我们基于 Webpack，搭建测试 demo。

创建 Webpack 配置文件:

// webpack.config.js
module.exports = {
  // 项目入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 加载器
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  // 插件
  plugins: [
    // 代码拆分插件
    new webpack.optimize.SplitChunksPlugin({
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    }),
  ],
};

安装 Babel 插件:

npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-transform-dead-code-elimination

修改 .babelrc 文件:

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-dead-code-elimination"
  ]
}