[JavaScript知识库]22 Babel优化

babel优化

webpack中如何使用babel可以查看之前写的webpack中使用bable一文

Babel的转换过程是一个非常耗时的过程，为了提升构建效率，需要对Babel的使用进行相关的优化。

开启缓存

Babel-loader用于处理所匹配到的JavaScript文件，要尽可能精确所需处理文件的范围，同时需要把转移结果缓存到文件系统，下次转换加速：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__driname, 'src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
}

抽离公共转换代码

Babel在每个文件都插入了辅助代码，使代码体积过大。Babel对一些公共方法使用了非常小的辅助代码，比如_extend，默认情况下会被添加到每一个需要它的文件中。

为了抽离这些公共转换代码，我们需要安装@babel/plugin-transform-runtime这个插件，它的功能是可重复使用Babel注入的程序代码以节省代码大小。需要将其作为开发依赖，同时还需要安装@babel/runtime作为生产依赖。

配置如下：

{
    "presets": [
        [
            "@babel/env",
            {
                "targets": {
                    "ie": "10",
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}