js兼容性处理babel polyfill 和按需加载core-js

最新推荐文章于 2024-09-24 12:27:15 发布

原创最新推荐文章于 2024-09-24 12:27:15 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

12 篇文章

订阅专栏

webpack

4 篇文章

订阅专栏

react

3 篇文章

订阅专栏

本文介绍了如何通过Babel和Core-JS进行性能优化，核心在于使用`@babel/preset-env`的useBuiltIns选项配合corejs按需引入polyfill，针对不同浏览器版本（如Chrome 58和IE 9）进行兼容性处理。配置中详细展示了babel-loader的使用方式和 targets 设置。

polyfill:babel的一个分支，babel转换的是低级的（const，转换es6新语法的高级语法（如promise），但是会全部转换,代价大。
core-js 解决polyfill的缺点，但是他需要polyfill。性能优化的一种手段
配置如下：

   test: /\.js|jsx$/, exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {
                                useBuiltIns: 'usage', // 按需引入，使用polyfill
                                corejs: { version: 3 },// 不写报错，找不到core-js
                                targets: {	//兼容
                                    "chrome": "58",
                                    "ie": "9",
                                }
                            }
                            ]
                        ]
                    }
                }