【学习笔记】Webpack5(Ⅱ)

Webpack

  • 3、高级篇
    •       3.1、提升开发体验 —— SourceMap
    •       3.2、提升打包速度
      •             3.2.1 HotModuleReplacement
      •             3.2.2 OneOf
      •             3.2.3 Include / Exclude
      •             3.2.4 Cache
      •             3.2.5 Thread
    •       3.3、减少代码体积
      •             3.3.1 Tree Shaking
      •             3.3.2 Babel
      •             3.3.3 Image Minimizer
    •       3.4、优化代码运行性能
      •             3.4.1 Code Split
      •             3.4.2 统一命名
      •             3.4.2 Preload / Prefetch
      •             3.4.3 Network Cache
      •             3.4.4 Core-js
      •             3.4.5 PWA

3、高级篇

      3.1、提升开发体验 —— SourceMap

        当使用开发服务器调试代码的时候,可以在浏览器中看到编译后的代码,开发模式下我们是让 css 并入 js 文件因为在配置开发模式的配置文件时没有让 css 单独提取出来
在这里插入图片描述
        此时如果代码运行出错,我们点击这些错误的链接
在这里插入图片描述
        会发现它让我们去观察编译后的代码的错误,不经阿这阿这阿这了出来…谁看得懂你编译后这是哪跟哪啊…
在这里插入图片描述
        甚至是后续一旦将来开发代码文件很多,就更难去发现该错误对应我们原代码中的哪个地方,因此如果能够让这些错误的链接一点击,就能让我们看到是源码的哪里出了错,而不是编译后的文件哪里出了错,来帮助我们更好的调试、修改代码,因此我们可以使用 SourceMap 来解决这个问题
        SourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射的文件的方案。,它会生成一个 xxx.map 文件,里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了,会通过 xxx.map 文件,从构建后代码出错位置找到映射后源代码出错位置,从而让浏览器提示源代码文件出错位置,帮助我们更快的找到错误根源
        开发环境配置,修改 webpack.dev.js 文件如下

// 在暴露的对象身上添加一个 devtool 配置
devtool: "cheap-module-source-map",

        生产环境配置,修改 webpack.prod.js 文件如下

// 在暴露的对象身上添加一个 devtool 配置
devtool: "source-map",
优缺点描述
cheap-module-source-map① 优点:打包编译速度快,只包含行映射
② 缺点:没有列映射
source-map① 优点:包含行 / 列映射
② 缺点:打包编译速度更慢

        修改完配置后现在重启开发服务器,点击错误这个地方
在这里插入图片描述
        会发现给我们跳转到源码上出现错误的地方了
在这里插入图片描述        再来看一下生产模式下会是什么样的,运行npm run build先进行打包,打包之后可以看到 dist/static/js 下多出了一个 main.js.map 的文件,这个文件是一个源映射文件,将打包后的 JavaScript 代码映射回原始的源代码,以及源代码中的位置信息,因此当编译后的代码出错时,我们点击控制台中的链接,就会按照这个映射,给我们跳转到源码上出错的地方了
在这里插入图片描述
        观察出错的地方,我们可以发现 source-map 对源码的定位是包括行和列的,如果只是行的话,那么 return 下方也会划有红线

      3.2、提升打包速度

            3.2.1 HotModuleReplacement

        在开发过程中,随着项目的体积越来越大,打包的速度会越来越慢,如果在后续项目一大时进行开发,我们有时只需修改了一点点的代码例如某个变量值变一下,然而 Webpack 默认还是会将所有模块全部重新打包编译,导致每次修改一点代码都需要经历漫长的编译等待,体验很差,此时我们可以使用 HotModuleReplacement 来解决这个问题
        Hot Module Replacement (HMR) 是 Webpack 提供的一项功能,它允许在运行时替换、添加或删除模块,能够使得只让修改的模块重新打包编译而其他模块不需要进行重新打包编译,且无需完全重新加载整个页面(即不会刷新页面,从而能保留应用的状态如表单输入、滚动位置等会被保留)。这对开发体验有很大的提升,使得开发过程更加流畅和高效
        只需要修改开发模式配置文件的devServer配置即可

// webpack.dev.js
devServer: {host: "localhost", // 启动服务器域名port: "3002", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 开启HMR功能
},

        配置之后更改 css 代码可以发现页面不会重新刷新了,并且在控制台可以看到 [HMR] 开头的提示,这说明其只对修改的 css 模块进行重新编译打包

        然而现在修改 js 代码还是会发现页面被刷新,即整个项目重新打包编译,因此还需要做进一步的配置

// 在入口文件 src/main.js 中添加如下代码
if (module.hot) {module.hot.accept("./js/count.js"); // count模块需要实现热模块替换功能module.hot.accept("./js/sum.js"); // sum模块需要实现热模块替换功能
}

        当我们运行开发服务器的时候,修改 count.js / sum.js 的代码只会重新打包编译相应的模块而不会导致整个模块重新打包编译,注意不是修改 module.hot.accept 函数中的代码,修改了其中的代码,页面依然会刷新、项目依然会重新打包编译,可见 HRM 是帮助我们在修改模块的时候可以更快速地完成打包编译工作
        当运行开发服务器后对模块代码进行更改如下

// sum.js 原来的代码
export default function count(x, y) {return x + y;
}// 尝试修改并观察浏览器
export default function count(x, y) {return x + y +1;
}

        会发现浏览器并没有刷新,并且控制台输出了 [HMR] 开头的提示信息,这就说明我们的配置成功了
在这里插入图片描述
        然而在实际的开发中,需要我们一个个模块都这样声明是很麻烦的,因此我们通常会使用一些 loader 来解决,在开发 vue 时可以使用 vue-loader 、在 开发 react 的时候可以使用 react-hot-loader 来帮我们自动地实现这个功能
        最后需要注意的是 HMR 是应用在开发模式下的,是为了提高我们的开发速度,让我们可以更快地看到代码修改后的成果,而不是应用在生产模式下的,当代码结束了开发阶段后,还是需要老老实实地从将整个项目重新打包

            3.2.2 OneOf

        由于每个文件都只会使用一个 rule 中指明地 loader 去进行处理,然而当我们什么都不配置的时候,每个文件都会与配置中间中出现的所有 loader 进行对比,即使已经匹配到了相应的 rule,然是还是不会停下来,会对比完所有的 rule 才结束,这显然是大可不必的,因此处理方法是将所有的 rule 都放在 oneOf 指明的数组里

// webpack.dev.js      webpack.prod.js配置同理
// 修改rules配置
rules: [{oneOf: [{test: /\.css$/i,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: 50 * 1024}}, //解析generator: {filename: "static/imgs/[hash:8][ext][query]"},},{test: /\.(ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/

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

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

相关文章

小苯的01背包easy(枚举,位运算,思维推导)

文章目录 题目描述输入格式输出格式样例输入1样例输出1样例输入2样例输出2提交链接提示 解析参考代码 题目描述 小苯有一个容量为 k k k 的背包,现在有 n n n 个物品,每个物品有一个体积 v v v 和价值 w w w,他想知道在体积不超过 k k …

ACM实训冲刺第十八天

统计元音 代码 需要注意的是getchar()和gets(s) #include<stdio.h> #include<string.h> int main(){//测试实例个数int n;scanf("%d",&n) ;char s[100];getchar();while(n--){gets(s);int cnta0,cnte0,cnti0,cnto0,cntu0;for(int j0;j<strlen(…

蓝桥杯杨辉三角

PREV-282 杨辉三角形【第十二届】【蓝桥杯省赛】【B组】 &#xff08;二分查找 递推&#xff09;&#xff1a; 解析&#xff1a; 1.杨辉三角具有对称性&#xff1a; 2.杨辉三角具有一定规律 通过观察发现&#xff0c;第一次出现的地方一定在左部靠右的位置&#xff0c;所以从…

Math对象是什么?有什么用?

Math对象是JavaScript的一个内置对象&#xff0c;包含了一些常用的数学方法和属性。它提供了一些数学运算的函数&#xff0c;可以通过调用这些函数来执行各种数学计算。 Math对象的一些常用方法包括&#xff1a; 1. Math.abs(x)&#xff1a;返回一个数的绝对值。 2. Math.ceil…

浅析OceanBase数据库:特点、优势与应用场景

随着数据量的不断增长和业务需求的不断变化&#xff0c;数据库技术在现代信息系统中的地位变得越来越重要。蚂蚁集团推出的OceanBase数据库&#xff0c;凭借其高性能、高可用性和高扩展性&#xff0c;成为了业内备受关注的明星产品。本文将从技术角度&#xff0c;浅浅的解析Oce…

FTP协议——BFTPD安装(Linux)

1、简介 BFTPD&#xff0c;全称为 Brutal File Transfer Protocol Daemon&#xff0c;是一个用于Unix和类Unix系统的轻量级FTP服务器软件。它的设计理念是提供一个简单、快速、安全的FTP服务器解决方案&#xff0c;特别适用于需要低资源占用的环境。 2、步骤 环境&#xff1…

C语言基础-如何避免内存泄漏

在C语言中&#xff0c;内存泄漏是一个常见且严重的问题&#xff0c;因为它可能导致程序消耗过多的内存资源&#xff0c;最终耗尽系统资源&#xff0c;导致程序崩溃或系统变得不稳定。为了避免内存泄漏&#xff0c;程序员需要仔细管理分配的内存&#xff0c;并确保在适当的时候释…

使用Golang调用腾讯云对象存储(COS)

文章目录 一、腾讯云COS对象存储创建1.1 创建存储桶2.1 存储桶测试 二、使用Golang调用腾讯云对象存储&#xff08;COS&#xff09;2.1 安装COS SDK2.2 初始化COS客户端2.3 上传文件2.4 下载文件2.5 列出存储桶中的对象2.6 整体代码示例 本文档介绍如何使用Golang调用腾讯云对象…

正在直播:Microsoft Copilot Studio 新增支持Copilot代理、Copilot扩展等多项功能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

java连接ldap实现查询

文章目录 一、项目背景二、准备工作三、验证结果四、易错点讲解易错点1&#xff1a;java: 无法访问org.springframework.ldap.core.LdapTemplate易错点2&#xff1a;java: 无法访问org.springframework.context.ConfigurableApplicationContext易错点3&#xff1a;[LDAP: error…

思科、华为、华三、Juniper路由协议优先级汇总

Part1思科路由协议管理距离默认值 路由来源默认值已连接的接口0静态路由1增强型内部网关路由协议 (EIGRP) 汇总路由5外部边界网关协议 (BGP)20内部 EIGRP90IGRP100OSPF110IS-IS&#xff08;中间系统到中间系统&#xff09;115路由信息协议 (RIP)120Exterior Gateway Protocol …

Python——字典数据存入excel

# 字典结果写入excel表保存 df pd.DataFrame(my_dict) # dict转DataFrame result_excel df.T # 转置 print(result_excel) result_excel.to_excel(save_path) # 写入excel

C++:STL—算法

C:STL—算法 算法 算法 STL&#xff08;Standard Template Library&#xff09;中的算法是为了操作数据集合&#xff08;如容器&#xff09;而设计的函数模板集合&#xff0c;它们提供了丰富的功能和灵活的接口&#xff0c;可以用于对数据进行排序、查找、遍历等操作。STL中的…

STM32 学习——1. STM32最小系统

这是一个最小系统的测试&#xff0c;LED灯会进行闪烁。选用PC13口&#xff0c;因为STM32F103C8T6 硬件开发板中&#xff0c;这个端口是一个LED 1. proteus8.15 原理图 2. cubemx 新建工程 3. keil 代码 while (1){HAL_GPIO_TogglePin(LED_GPIO_Port, LED_Pin);HAL_Delay(100);…

WGCAT工单系统如何配置通知

WGCAT工单系统可以配置邮件通知 只要配置了邮件通知&#xff0c;那么一旦我们账号有新的工单需要处理&#xff0c;就会接受到邮件通知 除了邮件之外&#xff0c;还可以配置其他方式的通知&#xff0c;比如微信钉钉短信等方式&#xff0c;参考如下 https://www.wgstart.com/wgc…

机器学习(五) -- 监督学习(5) -- 线性回归1

系列文章目录及链接 上篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;4&#xff09; -- 集成学习方法 - 随机森林 下篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;5&#xff09; -- 线性回归2 前言 tips&#xff1…

Jmeter例题分析-作业一

作业 作业1概要 本文档是关于执行软件性能测试的详细指南&#xff0c;包括使用JMeter工具进行测试的步骤和要求。 文档分为两个主要部分&#xff1a;性能测试的执行和性能测试报告的编写。 在第一部分中&#xff0c;详细描述了如何使用 JMeter进行性能测试。这包括设置测试环…

PyTorchLightning集成SwanLab进行训练监控与可视化

文档&#xff1a;https://docs.swanlab.cn/zh/guide_cloud/integration/integration-pytorch-lightning.html PyTorch Lightning是一个开源的机器学习库&#xff0c;它建立在 PyTorch 之上&#xff0c;旨在帮助研究人员和开发者更加方便地进行深度学习模型的研发。Lightning 的…

力扣刷题---961. 在长度 2N 的数组中找出重复 N 次的元素【简单】

题目描述&#x1f357; 给你一个整数数组 nums &#xff0c;该数组具有以下属性&#xff1a; nums.length 2 * n. nums 包含 n 1 个 不同的 元素 nums 中恰有一个元素重复 n 次 找出并返回重复了 n 次的那个元素。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,3] 输…

树形dp(学习过程+刷题总结)

树形 d p &#xff08;学习过程 刷题总结&#xff09; \Huge{树形dp&#xff08;学习过程刷题总结&#xff09;} 树形dp&#xff08;学习过程刷题总结&#xff09; 文章目录 写在前面基本的dp方程选择节点类树形背包类 例题练习已练习未练习 写在前面 花了几天时间学了一下树…