Webpack高级学习：多进程打包Thead

最新推荐文章于 2024-05-15 09:37:40 发布

¡Venceremo

最新推荐文章于 2024-05-15 09:37:40 发布

阅读量1.1k

点赞数

分类专栏： Webpack 文章标签： webpack Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129717195

版权

Webpack 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

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

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

而对 js 文件处理主要就是 eslint 、babel、Terser（生产模式下压缩文件）三个工具，所以我们要提升它们的运行速度。

我们可以开启多进程（开启电脑的多个进程同时干一件事，速度更快）同时处理 js 文件，这样速度就比之前的单进程打包更快了。——仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。——最大进程数就是你cpu核数

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

安装thread-loader

npm i thread-loader -D

引入

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

在js，由于是多个模块就使用use

{
            test: /\.js$/,//处理的文件js吻技安
            //exclude: /node_modules/, // 排除node_modules文件不处理，不编译。这是第三方包，已经处理好了 不然会重复操作
            include: path.resolve(__dirname, "../src"),
            use: [
              {
                loader: "babel-loader",//只用一个
                // options: {
                //   presets: ['@babel/preset-env']
                // }//直接写配置 或者外面写配置文件
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                  cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 
                },
              },
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },

            ]
          },

在eslint部分

 //检查eslint
    new ESLintPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多进程和设置进程数量
    }),

压缩js，webpack内置了

const TerserPlugin = require("terser-webpack-plugin");

    new TerserPlugin({
      parallel: threads // 开启多进程
    })

生产模式：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintPlugin = 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");
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

// 用来获取处理样式的loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader, // 提取css成单独文件
    "css-loader", // 将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    pre,
  ].filter(Boolean);//filter过滤pre=undefined参数
}

module.exports = {
  // 入口
  entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变
  // 输出
  output: {// 必须绝对路径
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    //生产模式有输出
    path: path.resolve(__dirname, "../dist"),//绝对路径需要更改

    // filename: 输出文件名
    filename: "static/js/main.js",
    clean: true,//自动将上次打包目录资源清空
  },
  // 加载器-帮助识别不能识别的内容
  module: {//loader规则
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/i, // 用来匹配 .css 结尾的文件
            use: getStyleLoader(),
            //use 数组里面 Loader 执行顺序是从右到左(从下到上)
          },
          {
            test: /\.less$/i, // 用来匹配 .less 结尾的文件
            //loader:"xxx"只能使用1个loader
            use: getStyleLoader("less-loader"),//将less变成css文件
          },
          {
            test: /\.s[ac]ss$/i,
            use: getStyleLoader("sass-loader"),
          },
          {
            test: /\.styl$/,
            use: getStyleLoader("stylus-loader"),
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)/,
            type: 'asset',//asset会转base64
            parser: {
              dataUrlCondition: {
                //小于10ke图片转base64
                //优点：减少请求数量 缺点：体积会更大
                maxSize: 10 * 1024 // 10kb
              }
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型
            type: "asset/resource",//不会转原封不动
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,//处理的文件js吻技安
            //exclude: /node_modules/, // 排除node_modules文件不处理，不编译。这是第三方包，已经处理好了 不然会重复操作
            include: path.resolve(__dirname, "../src"),
            use: [
              {
                loader: "babel-loader",//只用一个
                // options: {
                //   presets: ['@babel/preset-env']
                // }//直接写配置 或者外面写配置文件
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                  cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 
                },
              },
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },

            ]
          },
        ]

      }
    ],
  },
  // 插件-扩展功能
  plugins: [
    //检查eslint
    new ESLintPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多进程和设置进程数量
    }),
    //处理html资源 自动引入
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建新的html文件
      // 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin( // 定义输出文件名和目录
      {
        // 定义输出文件名和目录
        filename: "static/css/main.css",
      }),
    // css压缩
    new CssMinimizerPlugin(),
    new TerserPlugin({
      parallel: threads // 开启多进程
    })

  ],
  // 模式
  mode: "production",// 生产模式
  devtool: "source-map",
};

压缩还可以在optimization中做

  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      //压缩css
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      //压缩js
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ],

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintPlugin = 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");
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

// 用来获取处理样式的loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader, // 提取css成单独文件
    "css-loader", // 将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    pre,
  ].filter(Boolean);//filter过滤pre=undefined参数
}

module.exports = {
  // 入口
  entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变
  // 输出
  output: {// 必须绝对路径
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    //生产模式有输出
    path: path.resolve(__dirname, "../dist"),//绝对路径需要更改

    // filename: 输出文件名
    filename: "static/js/main.js",
    clean: true,//自动将上次打包目录资源清空
  },
  // 加载器-帮助识别不能识别的内容
  module: {//loader规则
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/i, // 用来匹配 .css 结尾的文件
            use: getStyleLoader(),
            //use 数组里面 Loader 执行顺序是从右到左(从下到上)
          },
          {
            test: /\.less$/i, // 用来匹配 .less 结尾的文件
            //loader:"xxx"只能使用1个loader
            use: getStyleLoader("less-loader"),//将less变成css文件
          },
          {
            test: /\.s[ac]ss$/i,
            use: getStyleLoader("sass-loader"),
          },
          {
            test: /\.styl$/,
            use: getStyleLoader("stylus-loader"),
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)/,
            type: 'asset',//asset会转base64
            parser: {
              dataUrlCondition: {
                //小于10ke图片转base64
                //优点：减少请求数量 缺点：体积会更大
                maxSize: 10 * 1024 // 10kb
              }
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型
            type: "asset/resource",//不会转原封不动
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,//处理的文件js吻技安
            //exclude: /node_modules/, // 排除node_modules文件不处理，不编译。这是第三方包，已经处理好了 不然会重复操作
            include: path.resolve(__dirname, "../src"),
            use: [
              {
                loader: "babel-loader",//只用一个
                // options: {
                //   presets: ['@babel/preset-env']
                // }//直接写配置 或者外面写配置文件
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                  cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 
                },
              },
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },

            ]
          },
        ]

      }
    ],
  },
  // 插件-扩展功能
  plugins: [
    //检查eslint
    new ESLintPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多进程和设置进程数量
    }),
    //处理html资源 自动引入
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建新的html文件
      // 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin( // 定义输出文件名和目录
      {
        // 定义输出文件名和目录
        filename: "static/css/main.css",
      }),
      
    // css压缩
    // new CssMinimizerPlugin(),
    // new TerserPlugin({
    //   parallel: threads // 开启多进程
    // })

  ],
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ],
  },
  // 模式
  mode: "production",// 生产模式
  devtool: "source-map",
};

开发模式也是一样的：js不需要压缩

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintPlugin = 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");
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

// 用来获取处理样式的loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader, // 提取css成单独文件
    "css-loader", // 将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    pre,
  ].filter(Boolean);//filter过滤pre=undefined参数
}

module.exports = {
  // 入口
  entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变
  // 输出
  output: {// 必须绝对路径
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    //生产模式有输出
    path: path.resolve(__dirname, "../dist"),//绝对路径需要更改

    // filename: 输出文件名
    filename: "static/js/main.js",
    clean: true,//自动将上次打包目录资源清空
  },
  // 加载器-帮助识别不能识别的内容
  module: {//loader规则
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/i, // 用来匹配 .css 结尾的文件
            use: getStyleLoader(),
            //use 数组里面 Loader 执行顺序是从右到左(从下到上)
          },
          {
            test: /\.less$/i, // 用来匹配 .less 结尾的文件
            //loader:"xxx"只能使用1个loader
            use: getStyleLoader("less-loader"),//将less变成css文件
          },
          {
            test: /\.s[ac]ss$/i,
            use: getStyleLoader("sass-loader"),
          },
          {
            test: /\.styl$/,
            use: getStyleLoader("stylus-loader"),
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)/,
            type: 'asset',//asset会转base64
            parser: {
              dataUrlCondition: {
                //小于10ke图片转base64
                //优点：减少请求数量 缺点：体积会更大
                maxSize: 10 * 1024 // 10kb
              }
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型
            type: "asset/resource",//不会转原封不动
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,//处理的文件js吻技安
            //exclude: /node_modules/, // 排除node_modules文件不处理，不编译。这是第三方包，已经处理好了 不然会重复操作
            include: path.resolve(__dirname, "../src"),
            use: [
              {
                loader: "babel-loader",//只用一个
                // options: {
                //   presets: ['@babel/preset-env']
                // }//直接写配置 或者外面写配置文件
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                  cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 
                },
              },
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },

            ]
          },
        ]

      }
    ],
  },
  // 插件-扩展功能
  plugins: [
    //检查eslint
    new ESLintPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多进程和设置进程数量
    }),
    //处理html资源 自动引入
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建新的html文件
      // 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin( // 定义输出文件名和目录
      {
        // 定义输出文件名和目录
        filename: "static/css/main.css",
      }),
      
    // css压缩
    // new CssMinimizerPlugin(),
    // new TerserPlugin({
    //   parallel: threads // 开启多进程
    // })

  ],
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      //压缩css
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      //压缩js
      new TerserPlugin({
        parallel: threads // 开启多进程
      })
    ],
  },
  // 模式
  mode: "production",// 生产模式
  devtool: "source-map",
};

打包的内容都很少，由于启动进程开销原因，使用多进程打包实际上会显著的让我们打包时间变得很长。当内容多时候，多进程就会加快速度

¡Venceremo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Webpack高级学习：多进程打包Thead

打包的内容都很少，由于启动进程开销原因，使用多进程打包实际上会显著的让我们打包时间变得很长。仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。同时处理 js 文件，这样速度就比之前的单进程打包更快了。开启多进程（开启电脑的多个进程同时干一件事，速度更快）获取 CPU 的核数，因为每个电脑都不一样。我们想要继续提升打包速度，其实就是。在js，由于是多个模块就使用use。，所以我们要提升它们的运行速度。
复制链接

扫一扫