标签：需要 22 Babel 代码 loader babel runtime 优化

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"
    ]
}

标签：需要,22,Babel,代码,loader,babel,runtime,优化
来源： https://blog.csdn.net/sinat_41212418/article/details/121801550

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。