Webpack高级学习：减少Babel生成文件的体积

Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！

Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。对于相同的辅助代码 Babel可能定义了n份

将这些辅助代码作为一个独立模块，来避免重复引入。

使用插件@babel/plugin-transform-runtime:

禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

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

配置开发模式生产模式都可以做

 plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积

 {
            test: /\.js$/,//处理的文件js吻技安
            //exclude: /node_modules/, // 排除node_modules文件不处理，不编译。这是第三方包，已经处理好了 不然会重复操作
            include: path.resolve(__dirname, "../src"), //只处理src文件
            use: [
              {
                loader: "babel-loader",//只用一个
                // options: {
                //   presets: ['@babel/preset-env']
                // }//直接写配置 或者外面写配置文件
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                  cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                },
              },
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },

            ]
          },