webpack学习笔记-webpack优化代码运行性能Core-js

Core.js

过去我们使用babel对js代码进行兼容处理，其中使用@babel/preset-env智能预设来处理兼容性问题。

他能将ES6的一些语法进行编译转换，比如箭头函数、...（扩展运算符）等，但是如果是 async 函数、promise对象、数组的一些方法等它没法处理。

所以此时我们js代码仍然存在兼容性问题，一旦遇低版本浏览器会直接报错，所以我们需要将js兼容性问题解决到底。

coreJS是专门用来做ES6以及以上API的polyfill。

polyfill翻译过来叫做 垫片/补丁，就是社区提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。

那我们怎么使用core.js呢？

• 下载core.js

npm install core-js --save-dev

• 在main.js中引入

有三种引入方式

1. 完整引入core.js

// 完整引入后打包体积太大
import 'core-js'

2. 指定引入

// 指定引入promise
import "core-js/es/promise"

3. 按需引入 core.js的按需加载是配置在babel.config.js中的

module.exports = {
  // 预设
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: 'usage', // 对core.js按需加载
        corejs: 3
      }
    ]
  ]
}