Webpack5相关知识点（二）- 优化（1）- SourceMap、提升打包构建速度

最新推荐文章于 2024-04-10 11:26:14 发布

JHY97

最新推荐文章于 2024-04-10 11:26:14 发布

阅读量1k

点赞数

分类专栏：打包工具文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/JHY97/article/details/125204665

版权

打包工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、SourceMap

1.1 简介

1.2 配置

1.2.1 cheap-module-source-map

一、SourceMap

Devtool | webpack 中文文档 (docschina.org)

1.1 简介

SourceMap（源代码映射）：用来生成源代码与构建后代码一一映射的文件的方案。

当项目构建后，会将开发中的多个文件代码打包到一个文件中，经过压缩，去掉多余的空格，以及babel编译化后，最终会用于线上环境。经过这样处理后的代码与源代码会有很大区别。当遇到bug的时候，只能定位到构建后的代码位置，而无法定位到开发中代码的位置。

SourceMap（源代码映射）会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，更快的找到错误根源

1.2 配置

SourceMap 的值有很多种情况，但主要关注 cheap-module-source-map 和 source-map

1.2.1 cheap-module-source-map

开发模式：cheap-module-source-map

优点：打包编译速度快，只包含行映射
缺点：没有列映射

module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};

1.2.2 source-map

生产模式：source-map

优点：包含行/列映射
缺点：打包编译速度更慢

module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

二、提升打包构建速度

2.1 oneOf

打包时每个文件都会经过所有 loader 处理，使用 oneOf 后，只要匹配上一个 loader, 剩下的就不会继续匹配

使用：只需将loader配置放入 oneOf: [] 中即可

  // 加载器
  module: {
    rules: [ 
      {
        oneOf: [
            // loader的配置
            // 省略...
        ],
      },
    ],
  },

2.2 Include/Exclude

include：包含，只处理 xxx 文件
exclude：排除，除了 xxx 文件以外其他文件都处理

处理js文件，以排除node_modules目录下的文件为例

（第三方的库或插件下载完后都存放在 node_modules 中，这些文件是不需要编译可以直接使用的，所以对 js 文件处理时，要排除 node_modules 下面的文件）

使用 exclude：

          {
            test: /\.m?js$/,
            exclude: /(node_modules)/, // 排除 node_modules下的文件
            use: {
              loader: "babel-loader",
            },
          },

使用include：

          {
            test: /\.m?js$/,
            // exclude: /(node_modules)/, // 排除 node_modules下的文件
            include: path.resolve(__dirname, "../src"), // 只处理src目录下文件，其他文件不处理
            use: {
              loader: "babel-loader",
            },
          },

2.3 Cache

对 Eslint 检查和 Babel 编译结果进行缓存，这样再次打包时速度就会更快

使用：以Babel为例

          {
            test: /\.m?js$/,
            include: path.resolve(__dirname, "../src"),
            use: {
              loader: "babel-loader",
              options: {
                cacheDirectory: true, // 开启babel缓存
                cacheCompression: false, // 关闭缓存文件压缩
              },
            },
          },

再次打包后，可在 node_modules 下找到缓存文件

2.4 Thead

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

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

2.4.1 获取CPU核数

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

2.4.2 下载包

npm i thread-loader -D

2.4.3 使用

以处理babel-loader为例

// Node.js的核心模块，专门用来处理路径问题
const os = require("os");
const path = require("path");

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;

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/main.js",
    clean: true,
  },
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
          // 省略...
          {
            test: /\.m?js$/,
            include: path.resolve(__dirname, "../src"),
            use: [
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true, // 开启babel缓存
                  cacheCompression: false, // 关闭缓存文件压缩
                },
              },
            ],
          },
        ],
      },
    ],
  },