Webpack5入门到原理22：提升打包构建速度

HotModuleReplacement

为什么

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

所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。

是什么

HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

怎么用

基本配置

module.exports = {// 其他省略devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）},
};

此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。

但是 js 还不行。

JS 配置

// main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);// 判断是否支持HMR功能
if (module.hot) {module.hot.accept("./js/count.js", function (count) {const result1 = count(2, 1);console.log(result1);});module.hot.accept("./js/sum.js", function (sum) {const result2 = sum(1, 2, 3, 4);console.log(result2);});
}

上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。

比如：vue-loader, react-hot-loader。

OneOf

为什么

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

是什么

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

怎么用

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: undefined, // 开发模式没有输出，不需要指定输出目录filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中// clean: true, // 开发模式没有输出，不需要清空输出结果},module: {rules: [{oneOf: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 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)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),],// 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 开启HMR功能},mode: "development",devtool: "cheap-module-source-map",
};

生产模式也是如此配置。

Include/Exclude

为什么

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

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

是什么

include

包含，只处理 xxx 文件

exclude

排除，除了 xxx 文件以外其他文件都处理

怎么用

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: undefined, // 开发模式没有输出，不需要指定输出目录filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中// clean: true, // 开发模式没有输出，不需要清空输出结果},module: {rules: [{oneOf: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 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)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,// exclude: /node_modules/, // 排除node_modules代码不编译include: path.resolve(__dirname, "../src"), // 也可以用包含loader: "babel-loader",},],},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "../src"),exclude: "node_modules", // 默认值}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),],// 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 开启HMR功能},mode: "development",devtool: "cheap-module-source-map",
};

生产模式也是如此配置。

Cache

为什么

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

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

是什么

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

怎么用

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/main.js",output: {path: undefined, // 开发模式没有输出，不需要指定输出目录filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中// clean: true, // 开发模式没有输出，不需要清空输出结果},module: {rules: [{oneOf: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 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)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,// exclude: /node_modules/, // 排除node_modules代码不编译include: path.resolve(__dirname, "../src"), // 也可以用包含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"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),],// 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 开启HMR功能},mode: "development",devtool: "cheap-module-source-map",
};

Thead

为什么

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

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

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

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

是什么

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

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

怎么用

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

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

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

下载包

npm i thread-loader -D

使用

const os = require("os");
const path = require("path");
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: {path: path.resolve(__dirname, "../dist"), // 生产模式需要输出filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{oneOf: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders("less-loader"),},{test: /\.s[ac]ss$/,use: getStyleLoaders("sass-loader"),},{test: /\.styl$/,use: getStyleLoaders("stylus-loader"),},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",},},{test: /\.(ttf|woff2?)$/,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编译缓存},},],},],},],},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"),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),// css压缩// new CssMinimizerPlugin(),],optimization: {minimize: true,minimizer: [// css压缩也可以写到optimization.minimizer里面，效果一样的new CssMinimizerPlugin(),// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了new TerserPlugin({parallel: threads // 开启多进程})],},// devServer: {//   host: "localhost", // 启动服务器域名//   port: "3000", // 启动服务器端口号//   open: true, // 是否自动打开浏览器// },mode: "production",devtool: "source-map",
};

我们目前打包的内容都很少，所以因为启动进程开销原因，使用多进程打包实际上会显著的让我们打包时间变得很长。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/639852.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

kafka入门(九)：副本

kafka入门(九)：副本

副本 副本（Replica），指的是分布式系统对数据和服务提供的一种冗余方式。 Kafka通过多副本机制实现故障自动转移，在Kafka集群中某个broker节点失效的情况下仍然保证服务可用。 kafka 副本之间是 一主多从的关系。 其中 leader 副…
阅读更多...
打开json文件，读取里边的每一行数据，每一行数据是一个字典，使用matplotlib画图

打开json文件，读取里边的每一行数据，每一行数据是一个字典，使用matplotlib画图

这段代码的目的是读取 JSON 文件，提取关键信息，然后使用 Matplotlib 绘制四个子图，分别显示不同的指标随着 iter 变化的情况。这种图形化分析有助于直观地了解模型的性能。 画图结果如下： json文件格式如下：下面只粘贴…
阅读更多...
大模型镜像打包实战:CodeGeeX2为例

大模型镜像打包实战:CodeGeeX2为例

资源地址 docker torch镜像地址 CodeGeeX2 github 构建思路 查看CodeGeeX2项目，官方已经提供好启动脚本，配置好各种依赖应该就可以运行。 python ./demo/run_demo.pyusage: run_demo.py [-h] [--model-path MODEL_PATH] [--example-path EXAMPLE_PAT…
阅读更多...
计算机网络学习The next day

计算机网络学习The next day

在计算机网络first day中，我们了解了计算机网络这个科目要学习什么，因特网的概述，三种信息交换方式等，在今天，我们就来一起学习一下计算机网络的定义和分类，以及计算机网络中常见的几个性能指标。 废话不多…
阅读更多...
yarn集群datanode无法启动问题排查

yarn集群datanode无法启动问题排查

一、问题场景 hdfs无法访问，通过jps命令查看进程，发现namenode启动成功，但是所有datanode都没有启动，重启集群（start-dfs.sh）后仍然一样 二、原因分析 先看下启动的日志有无报错。打开Hadoop的日志目录 …
阅读更多...
C#，入门教程(24)——类索引器（this）的基础知识

C#，入门教程(24)——类索引器（this）的基础知识

上一篇： C#，入门教程(23)——数据类型转换的一点基础知识https://blog.csdn.net/beijinghorn/article/details/124187182 工业软件首先要求高可靠性、高可维护性。 作为工业软件的开发者，我们对语言重载的需求是：“不可或缺”。 …
阅读更多...
创建数组（数组基本方法）

创建数组（数组基本方法）

组相同类型数据的集合 java中数组特点： 1.数组在内存中是连续分配的 2.在创建数组时，要指明数组的长度 3.访问数组，通过索引，从0开始，到数组长度-1 功能： 1.插入：向索引位置插入一个元素&#…
阅读更多...
Gitee Reward让开源作者不再为爱发电

Gitee Reward让开源作者不再为爱发电

一、什么是Gitee Reward？ Gitee Reward是Gitee为改善开源开发生命周期提出的新策略。开源项目的支持者们可以更轻松地为其喜爱的项目提供资金，贡献者们也可以因为其不懈的开源贡献得到奖励。 二、Gitee Reward上允许哪些类型的项目？ 允许任…
阅读更多...
stable diffuison的安装和使用

stable diffuison的安装和使用

stable diffuison的安装和使用 简单介绍 Stable Diffusion是一个深度学习文本到图像的生成模型，它可以根据文本描述生成详细的图像。这个模型主要应用于文本生成图像的场景中，通过给定的文本提示词，模型会输出一张与提示词相匹配的图片。 S…
阅读更多...
Cadence——布局部分相关教程

Cadence——布局部分相关教程

本文章基于【凡亿】Cadence Allegro 17.4零基础入门66讲PCB Layout设计实战加个人理解写出 （一）中英文切换 注意：只是将选项卡部分切换中文 1，设置中文 a,打开PCB Editor 17.4以后，点击Help和About b,可以看到与下…
阅读更多...
服务器或服务器主板中的BIOS更新详解

服务器或服务器主板中的BIOS更新详解

BIOS更新总共有三种方式：DOS、UEFI Shell以及BMC网页更新，而其中，DOS与Shell的更新方式类似，因此以下为统一描述。 一、UEFI Shell或DOS下更新 当我们下载了官网的BIOS更新包并解压后可以获得一些更新文件，在更新文件…
阅读更多...
舞动微服务的安全舞伴：服务熔断与服务降级的精妙演绎

舞动微服务的安全舞伴：服务熔断与服务降级的精妙演绎

目录 引言 1、服务熔断：避免连锁反应的舞姿 1.1 什么是服务熔断？ 1.2服务熔断的工作原理 场景：支付服务的重要性 1. 监控支付服务 2. 设定阈值 3. 熔断器状态 4. 触发熔断 5. 定时检测 6. 自动恢复 1.3解析 2、服务降级&#xf…
阅读更多...
Python基础第七篇（Python的文件操作）

Python基础第七篇（Python的文件操作）

文章目录 一、文件编码二、文件的读取操作1.操作代码2.读出结果 三、文件的写出操作1.源代码2.读出结果 四、文件的追加操作1.源代码2.读出结果 这篇文章旨在深入浅出地介绍Python在文件操作上的能力，包括文件的编码、读取和写入等基本操作。内容丰富、易于理解&…
阅读更多...
Homicide+Reports1980-2014连环凶案数据，CSV格式

Homicide+Reports1980-2014连环凶案数据，CSV格式

这个数据集提供了关于谋杀案件的详细信息，包括涉及的机构、受害者和肇事者的信息，以及犯罪的其他细节。下面是每个字段的详细解释： Record ID: 记录的唯一标识符。Agency Code: 执行机构的代码。Agency Name: 执行机构的名称。Agency Type: …
阅读更多...
公网环境调试本地配置的Java支付宝沙箱环境模拟支付场景

公网环境调试本地配置的Java支付宝沙箱环境模拟支付场景

文章目录 前言1. 下载当面付demo2. 修改配置文件3. 打包成web服务4. 局域网测试5. 内网穿透6. 测试公网访问7. 配置二级子域名8. 测试使用固定二级子域名访问 前言 在沙箱环境调试支付SDK的时候，往往沙箱环境部署在本地，局限性大，在沙箱环境…
阅读更多...
java SSM项目预算生成管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

java SSM项目预算生成管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM项目预算生成管理系统是一套完善的web设计系统（系统采用SSM框架进行设计开发，springspringMVCmybatis），对理解JSP java编程开发语言有帮助，系统具有完整的 源代码和数据库，系统主…
阅读更多...
浅析Java虚拟机中的ZGC

浅析Java虚拟机中的ZGC

引言 为什么需要垃圾回收（Garbage Collection） 垃圾回收是Java开发中的关键机制，负责自动管理内存，防止内存泄漏，提高开发效率和应用程序的稳定性。 Java中主要的垃圾回收方法 标记-清除算法（Mark and …
阅读更多...
盘点好用内容合规监测工具

盘点好用内容合规监测工具

网页敏感内容监测 Web Purify 由 WebPurify 提供，这是一个专门从事内容审核和过滤服务的公司。 核心功能 ● 文本审核：加强脏话过滤，标记仇恨言论、偏执、性挑逗等 ● 图片审核：让个人资料照片、社交应用程序、产品定制远离令…
阅读更多...
python windows和linux 文件同步

python windows和linux 文件同步

在Python中，可以使用paramiko库来实现Windows和Linux之间的文件同步。paramiko是一个用于SSH连接的Python库，可以用于在Windows和Linux之间进行文件传输。 以下是一个简单的示例代码，演示如何使用paramiko库在Windows和Linux之间同步文件&am…
阅读更多...
20.【TypeScript 教程】类型别名

20.【TypeScript 教程】类型别名

TypeScript 类型别名 本节介绍的类型别名，就是通过关键字 type 给类型起个别名，类型别名较多应用于联合类型、交叉类型这种复合类型。 1. 解释 类型别名会给类型起个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类…
阅读更多...
最新文章

Copyright @ 2022~2023