webpack优化-eslint和babel缓存（17）

前言

webpack处理样式资源都比较快，大多时间都是耗在处理JS代码中，也就是babel编译和eslint检查这两个步骤，每次编译打包都要重新处理一边，如果能够缓存Babel的处理结果和eslint的检查，下次修改只需要对修改的文件进行eslint的检查和Babel的处理，这样就可以节省很多时间。

1、缓存Babel的处理结果
在babel的配置options中设置缓存属性

{
 test: /\.js$/,//匹配js文件
       //排除node_modules文件，这里的内容是处理已经好的，无需重复处理，加大工作量
       exclude: /node_modules/,
       use: {
           loader: "babel-loader",
           // 这里可以在options中配置预设，
           // 也可以单独用babel.config.js文件配置，效果一样
           options: {
               // presets: ["@babel/preset-env"]
               cacheDirectory: true,//开启Babel缓存
               //关闭缓存文件压缩，这个文件只会消耗本地的磁盘空间，不会上线
               // 所以可以不压缩，不压缩可以减少文件进行压缩的时间
               cacheCompression:false,
           }
       }
   }

运行成功后会在node_module目录下的babel-loader中生产缓存文件

2、缓存eslint的检查结果
在plugins的eslint配置中添加缓存属性：

new ESLintPlugin({
 // context就是需要检查的文件目录，使用绝对路径,其他配置可以看官网
  context: path.resolve(__dirname, '../src'),
  cache: true,//开启缓存
  cacheLocation: path.resolve(__dirname,'../node_modules/.cache/eslintcache'),
}),