webpack生产环境性能优化打包构建速度-oneOf

最新推荐文章于 2024-08-15 13:59:56 发布

mus_木司

最新推荐文章于 2024-08-15 13:59:56 发布

阅读量459

点赞数

分类专栏：前端文章标签： js webpack

本文链接：https://blog.csdn.net/mus123/article/details/107696266

版权

在webpack配置中，通过oneOf规则可以优化构建速度。当每个文件不再需要全部rules检查，而只需一条规则解析时，使用oneOf确保文件匹配到第一条合适的规则后停止后续匹配。正确安排oneOf内loader的顺序至关重要，避免同一文件需要多个loader处理，例如，将eslint-loader置于oneOf顶部，以优先处理js文件。

摘要由CSDN通过智能技术生成

在加载loader时候，默认每个文件都会被所有的rules检查，但我们很多文件都只需要一条rules就可以解析完成，这无疑减慢了打包效率，因此可以考虑使用rules的oneOf规则，可以保证文件从oneOf里面的规则从上到下检查，满足一个rule之后就可以不进行下面的loader（需要做好顺序，而且不能同一个文件需要两个loader规则同时处理

所以如果有两个文件都需要不同的rule处理的时候把其中一个loader提取到oneOf外面，就可以了

比如对于js文件的eslint-loader和babelloader，我们考虑把先执行的eslint-loader放到oneOf的上方就可以了。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //html模板
const MiNiCssExtractPlugin = require("mini-css-extract-plugin"); //提取出css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); //压缩css
process.env.NODE_ENV = "production";
//复用css的loader
let commonCssLoader = [
  {
   
    loader: MiNiCssExtractPlugin.loader,
    options: {
   
      publicPath: "../", //避免css中的路径引入错误
    },
  }, //代替style标签而是引入css的形式
  "css-loader",
  {
   
    //把css压缩
    loader: "postcss-loader"<