Webpack 性能优化系列 - oneOf

Posted 2021-09-16 圆圆01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack 性能优化系列 - oneOf相关的知识，希望对你有一定的参考价值。

webpack系列文章：

oneOf

我们在写loader的时候，rules里面有非常非常多的loader规则，但是每个文件只能匹配一个 loader，被一个 loader 处理，因此可以使用 oneOf 唯一匹配，不需要每个文件把所有的 loader 都询问一遍，这样可以提高 loader 的执行效率

webpack.config.js写法配置如下:

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',//正常的，一个文件只能被一个loader处理，当一个文件要被多个loader处理，
        			   //一定要指定loader执行的先后顺序，先执行eslint再执行babel
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        // 以下loader只会匹配一个
        // 注意：不能有两个配置处理同一种类型文件,所以eslint-loader放在oneOf匹配之前执行
        oneOf: [
          {
            test: /\\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /*
            正常来讲，一个文件只能被一个loader处理。
            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
              先执行eslint 在执行babel
          */
          {
            test: /\\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {version: 3},
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          {
            test: /\\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
            test: /\\.html$/,
            loader: 'html-loader'
          },
          {
            exclude: /\\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

参考

https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver
https://www.cnblogs.com/cl1998/p/13210438.html
https://webpack.docschina.org/configuration/module/#ruleoneof

以上是关于Webpack 性能优化系列 - oneOf的主要内容，如果未能解决你的问题，请参考以下文章

(webpack系列二)webpack打包优化探索

vue项目性能优化系列

webpack优化环境配置

Webpack 性能优化