webapck优化-减少Babel的体积（19）

前言

Babel为编译的每个文件都插入辅助代码，对一些公用的方法使用了非常小的辅助代码，比如_extend,默认情况下会被插入每个需要的文件，使代码体积越来越大。
我们可以将babel runtime作为成为单独的模块，需要的文件按需引入即可，避免重复引用。
【babel runtime是Babel提供的工具库，提供一些常用的函数和对象，帮助开发者兼容性问题等】

实现babel runtime成为独立模块
禁用Babel自动对每个文件的runtime注入，而是引入@babel/plugin-transform-runtime,并且让所有的辅助代码从这里引入。
下载依赖：

npm i @babel/plugin-transform-runtime -D

配置@babel/plugin-transform-runtime

{
   loader: "babel-loader",
   // 这里可以在options中配置预设，
   // 也可以单独用babel.config.js文件配置，效果一样
   options: {
       // presets: ["@babel/preset-env"]
       cacheDirectory: true,//开启Babel缓存
       //关闭缓存文件压缩，这个文件只会消耗本地的磁盘空间，不会上线
       // 所以可以不压缩，不压缩可以减少文件进行压缩的时间
       cacheCompression:false,
       plugins:[
           '@babel/plugin-transform-runtime',//减少Babel生产代码体积
       ]
   }
}

运行打包即可。