Webpack5优化之提高打包构建速度

文章目录

  • 一、HotModuleReplacement
    • 1.1 为什么
    • 1.2 是什么
    • 1.3 怎么用
      • 1.3.1 基本配置
      • 1.3.2 JS配置
  • 二、OneOf
    • 2.1 为什么
    • 2.2 是什么
    • 2.3 怎么用
  • 三、Include/Exclude
    • 3.1 为什么
    • 3.2 是什么
    • 3.3 怎么用
  • 四、Cache
    • 4.1 为什么
    • 4.2 是什么
    • 4.3 怎么用
  • 五、Thread
    • 5.1 为什么
    • 5.2 是什么
    • 5.3 怎么用
      • 5.3.1 获取CPU核数
      • 5.3.2 安装依赖
      • 5.3.1 使用
  • 六、小结
    • 6.1 效果
    • 6.2 完整配置文件

一、HotModuleReplacement

1.1 为什么

在开发时,我们修改其中一个模块代码,Webpack默认会将所有模块重新打包编译,速度很慢。

我们需要做到修改某个模块代码,就只有这个模块代码重新打包编译,其他模块不变,这样速度就会有很大的提升。

1.2 是什么

HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、添加或删除模块,而无需重新加载整个页面

1.3 怎么用

1.3.1 基本配置

config/webpack.dev.js文件中配置:

//开发服务器
devServer: {
  host: '127.0.0.1', // 域名
  port: '3000', // 端口
  open: true, // 是否自动打开浏览器
  hot: true,// 开启HMR功能(只能用于开发环境,生产环境不需要)
},

此时css样式经过style-loader处理,已经具备HMR功能了, 但是js还不支持的

1.3.2 JS配置

main.js中,开启HMR

// 判断是否支持HMR功能
if (module.hot) {
  module.hot.accept('./js/sub.js')
  module.hot.accept('./js/sum.js', function (sum) {
    console.log('module.hot sum called');
  })
}

上面这样写会很麻烦,有多少个js就要配置多少个,所以实际开发我们会使用其他loader来解决。

比如:vue-loader 和 react-hot-loader

二、OneOf

2.1 为什么

打包时每个文件都会经过所有loader处理,虽然test正则原因实际没有处理上,但是都要过一遍,是比较慢的。

2.2 是什么

顾名思义就是只能匹配上一个loader, 剩下的就不匹配了。

2.3 怎么用

修改config/webpack.dev.jswebpack.prod.js,如下:

// 加载器
module: {
  rules: [
    {
      oneOf: [
        {
          // 匹配css结尾文件
          test: /\.css$/,
          // loader执行顺序是从右到左
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.less$/,
          use: ["style-loader", "css-loader", "less-loader"],
        },
        {
          test: /\.s[ac]ss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
        {
          test: /\.styl$/,
          use: ["style-loader", "css-loader", "stylus-loader"],
        },
        {
          test: /\.(png|jpe?g|gif|webp|svg)$/,
          type: "asset",
          parser: {
            // 小于10kb的图片转base64
            // 优点:减少请求数量  缺点:体积会增大三分之一
            dataUrlCondition: {
              maxSize: 20 * 1024 // 20kb
            }
          },
          generator: {
            // 将图片文件输出到 static/imgs 目录中
            // 将图片文件命名 [hash:8][ext][query]
            // [hash:8]: hash值取8位
            // [ext]: 使用之前的文件扩展名
            // [query]: 添加之前的query参数
            filename: "static/imgs/[hash:8][ext][query]",
          }
        },
        {
          /**
           * 处理图标字体、媒体等资源
           * type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源,其他不做处理
             type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
           */
          test: /\.(ttf|woff2?|map4|map3|avi)$/,
          type: "asset/resource",
          generator: {
            filename: "static/media/[hash:8][ext][query]",
          },
        },
        {
          test: /\.js$/,
          exclude: /node_modules/, // 排除node_modules代码不编译
          loader: "babel-loader",
        },
      ]
    }
  ]
},

三、Include/Exclude

3.1 为什么

开发时我们需要使用第三方的库或插件,所有文件都下载到node_modules中了,而这些文件是不需要编译可以直接使用的。

所以我们在对js文件处理时,要排除node_modules下面的文件。

3.2 是什么

  • include:包含,只处理xxx文件
  • exclude:排除,除了xxx文件以外其他文件都处理

需要注意的是includeexclude只能二选一

3.3 怎么用

修改config/webpack.dev.jsconfig/webpack.prod.js,如下:

...
{
  test: /\.js$/,
  // exclude: /node_modules/, // 排除node_modules代码不编译
  include: path.resolve(__dirname, '../src'),
  loader: "babel-loader",
},
...
new ESLintWebpackPlugin({
  // 指定检查文件的根目录
  context: path.resolve(__dirname, '../src'),
  exclude: 'node_modules'// 默认值
}),

四、Cache

4.1 为什么

每次打包时js文件都要经过Eslint检查和 Babel编译,速度比较慢。

我们可以缓存之前的Eslint检查和Babel编译结果,这样第二次打包时速度就会更快了。

4.2 是什么

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

4.3 怎么用

修改config/webpack.dev.jsconfig/webpack.prod.js,如下:

...
{
  test: /\.js$/,
  // exclude: /node_modules/, // 排除node_modules代码不编译
  include: path.resolve(__dirname, '../src'),
  loader: "babel-loader",
  options: {
    cacheDirectory: true,// 开启babel编译缓存
    cacheCompression: false // 缓存文件不要压缩
  }
},
...
new ESLintWebpackPlugin({
  // 指定检查文件的根目录
  context: path.resolve(__dirname, '../src'),
  exclude: 'node_modules',// 默认值
  cache: true, // 开启缓存
  cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache') // 缓存目录
}),

五、Thread

5.1 为什么

当项目越来越庞大时,打包速度越来越慢,甚至于需要一个下午才能打包出来代码,这个速度是比较慢的。

我们想要继续提升打包速度,其实就是要提升js的打包速度,因为其他文件都比较少。

而对js文件处理主要就是eslintbabelTerser三个工具,所以我们要提升它们的运行速度。

我们可以开启多进程同时处理js文件,这样速度就比之前的单进程打包更快了。

5.2 是什么

多进程打包:开启电脑的多个进程同时干一件事,速度更快。

需要注意:请仅在特别耗时的操作中使用,因为每个进程启动就有大约为600ms左右开销。

5.3 怎么用

我们启动进程的数量就是我们 CPU 的核数。

如何获取 CPU 的核数,因为每个电脑都不一样。

5.3.1 获取CPU核数

修改config/webpack.dev.jsconfig/webpack.prod.js

// nodejs核心模块,直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

5.3.2 安装依赖

npm i thread-loader -D

5.3.1 使用

修改config/webpack.prod.js

// nodejs核心模块
const os = require('os')
...
const TerserPlugin = require("terser-webpack-plugin");
// cpu核数
const threads = os.cpus().length
...
{
  test: /\.js$/,
  // exclude: /node_modules/, // 排除node_modules代码不编译
  include: path.resolve(__dirname, '../src'),
  use: [
    {
      loader: 'thread-loader',//开启多进程
      options: {
        workers: threads //数量
      }
    },
    {
      loader: "babel-loader",
      options: {
        cacheDirectory: true,// 开启babel编译缓存
        cacheCompression: false // 缓存文件不要压缩
      }
    }
  ]
},
...
new ESLintWebpackPlugin({
  // 指定检查文件的根目录
  context: path.resolve(__dirname, '../src'),
  exclude: 'node_modules',// 默认值
  cache: true, // 开启缓存
  cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache'), // 缓存目录
  threads,//开启多进程
}),
...
// 配置多进程
new TerserPlugin({
  parallel: threads // 开启多进程
})
...

在配置中有css压缩等,借用optimization优化配置

optimization: {
  minimize: true,
  minimizer: [
    // css压缩
    new CssMinimizerPlugin(),
    // 当生产模式会默认开启TerserPlugin,但是我们需要进行其他配置,就要重新写了
    new TerserPlugin({
      parallel: threads // 开启多进程
    })
  ]
}

我们目前打包的内容都很少,所以因为启动进程开销原因,使用多进程打包可能让我们打包时间变得很长。

六、小结

6.1 效果

经过如上一系列优化,在该示例项目中前后打包耗时对比如下:
在这里插入图片描述
在这里插入图片描述

6.2 完整配置文件

config/webpack.prod.js

// nodejs核心模块
const os = require('os')
const path = require('path') // nodejs核心模块,用来处理路径问题
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
// cpu核数
const threads = os.cpus().length

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};


module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    // 文件输出路径
    // __dirname nodejs变量,代表当前文件的文件夹目录
    path: path.resolve(__dirname, '../dist'),
    // 入口文件打包输出文件名
    filename: 'static/js/main.js',
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        oneOf: [
          {
            // 匹配css结尾文件
            test: /\.css$/,
            // loader执行顺序是从右到左
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              // 小于10kb的图片转base64
              // 优点:减少请求数量  缺点:体积会增大三分之一
              dataUrlCondition: {
                maxSize: 20 * 1024 // 20kb
              }
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            }
          },
          {
            /**
             * 处理图标字体、媒体等资源
             * type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源,其他不做处理
               type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
             */
            test: /\.(ttf|woff2?|map4|map3|avi)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, '../src'),
            use: [
              {
                loader: 'thread-loader',//开启多进程
                options: {
                  workers: threads //数量
                }
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true,// 开启babel编译缓存
                  cacheCompression: false // 缓存文件不要压缩
                }
              }
            ]
          },
        ]
      }
    ]
  },
  // 插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, '../src'),
      exclude: 'node_modules',// 默认值
      cache: true, // 开启缓存
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache'), // 缓存目录
      threads,//开启多进程
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, '../public/index.html'),
      inject: 'head'
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    // css压缩也可以写到optimization.minimizer里面,效果一样的
    // new CssMinimizerPlugin(),
    // 配置多进程
    // new TerserPlugin({
    //   parallel: threads // 开启多进程
    // })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin,但是我们需要进行其他配置,就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ]
  },
  //开发服务器
  // devServer: {
  //   host: '127.0.0.1', // 域名
  //   port: '3000', // 端口
  //   open: true, // 是否自动打开浏览器
  //   hot: true // 开启HMR
  // },
  // 模式
  mode: 'production',
  devtool: "source-map",
}

你可能感兴趣的:(webpack,前端,webpack优化,hmr,oneOf,多进程打包)