webpack5 使用cache对Eslint和Babel缓存提升打包构建速度

babel-loader | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/loaders/babel-loader/#options

cache

缓存生成的 webpack 模块和 chunk，来改善构建速度。cache 会在开发 模式被设置成 type: 'memory' 而且在 生产 模式 中被禁用。 cache: true 与 cache: { type: 'memory' } 配置作用一致。 传入 false 会禁用缓存:

为什么使用cache

每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。整个项目中js占的比重是最大的

我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，对修改的文件单独做一次编译,这样第二次打包时速度就会更快了。

cache是什么

对 Eslint 检查 和 Babel 编译结果进行缓存。

webpack.conf.js(开发环境和生产环境都需要写,我分了环境所以文件路径要跳出一层) 

module: {
  rules: [
    {
oneOf:[
         {
            test: /\.js$/,
            // exclude: /(node_modules)/, //排除node_modules不需要编译处理(因下载依赖的时候文件已处理过)
            include: path.resolve(__dirname, "../src"), //只处理src下的文件 其它文件不处理和exclude方法二选一及可(相同效果)
            use: {
              loader: "babel-loader",
              options: {
                cacheDirectory: true,//开启babel缓存
                cacheCompression:false,//关闭缓存文件压缩提高打包的速度(不压缩只会占用电脑内存,线上项目不会读取缓存代码文件,打包后可以在node_modules可以看到.cache\babel-loader文件)              
              //   presets: ["@babel/preset-env"],配置可以写到babel.config.js文件中好维护
              },
            },
          },
    ]
    }
  ],
  plugins: [
    //plugins的配置
       new ESLintPlugin({
      //context指定文件根目录，类型为字符串(检查src下的文件)
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", //默认值
      cache: true, //开启缓存
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ), //缓存放置路径
    }),
}

 打包前效果

打包后可以在node_modules可以看到.cache\babel-loader和.cache/.eslintcache文件

第一打包后显示速度

 第二次打包速度