当前位置： 首页 > news >正文

Webpack 特性探讨：CDN、分包、Tree Shaking 与热更新

news 2025/9/14 11:46:18

文章目录

    • 前言
    • 包准备
    • CDN 集成
    • 代码分包
    • Tree Shaking
      • 原理
      • 实现条件：
      • 解决 treeShaking 无效方案：
      • 示例代码：
    • 热更新（HMR）

前言

Webpack 作为现代前端开发中的核心构建工具，提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新（HMR）等关键特性。

我们将使用前一篇文章中的代码，然后我们引入一些图片、css 等资源文件已经一些常用的第三方库，如lodash

包准备

安装文件处理的 loader 和后续分析的包

yarn add webpack-bundle-analyzer  terser-webpack-plugin url-loader file-loader -D

在 webpack.config.js 添加 处理文件的 loader , file-loader

module: {rules: [//  ... 省略{test: /\.(jpg|png|jpeg|gif)$/,use: ["file-loader"],},],},

修改 list.vue

<template><div><img :src="jsJpg" /><h3>前端三大框架:</h3><ul><li v-for="item in list" :key="item">{{ item }}</li></ul></div>
</template><script>
import jsJpg from '@/static/js.jpg'
export default {name:'List',data() {return {list: ["Vue", "React", "Angular"],jsJpg};},
};
</script>

运行结果：

在这里插入图片描述

打包结果：

执行 yarn build

在这里插入图片描述

CDN 集成

CDN（内容分发网络）的使用可以显著提高资源加载速度，特别是对于静态资源。

我们可以有三种种方式来完成：

  1. output 配置中的 publicPath

这里我们如果没有 cdn，可以通过修改 hosts 文件的方式, 文件路径：C:\Windows\System32\drivers\etc，添加内容127.0.0.1 ziyu.aliyun.com, 最后我们添加启动端口


const mode =process.env.NODE_ENV === "development" ? "development" : "production";
const isDev = process.env.NODE_ENV === "development";output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",publicPath: isDev ? "/" : "http://ziyu.aliyun.com:3000/",},

添加前运行文件

在这里插入图片描述

打包运行后文件效果

在这里插入图片描述

  1. 配置externals属性将某些依赖项从打包文件中排除，并通过 CDN 链接直接引入。
externals: {vue: "Vue","vue-router": "VueRouter",
}

在 html 文件中添加

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title><%= htmlWebpackPlugin.options.title %></title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script></head><body><div id="app"></div></body>
</html>

添加打包分析器：

const BundleAnalyzerPlugin  = require('webpack-bundle-analyzer').BundleAnalyzerPluginplugins: [//   ...new BundleAnalyzerPlugin({analyzerMode: 'static',reportFilename: 'report.html',openAnalyzer: false,}),],

执行 yarn build, 查看report.html , 没有 vue和vue-router的代码

在这里插入图片描述

  1. 使用html-webpack-plugin插件，在生成的 HTML 文件中动态插入 CDN 资源链接。
// 1. 配置插件new HtmlWebpackPlugin({title: "vuew + webpack",template: "./src/index.html",}),
// 2. 配置html// 可以随便添加cdn

代码分包

代码分包是 Webpack 优化应用加载性能的重要手段。通过将代码分割成多个包，可以实现按需加载，减少单次加载的数据量。

代码准备：

我们新建一个utils/calc.js文件，然后补充代码：

export const sum = (a, b) => a + b;

常规使用： hello.vue 中引用

<template><button @click="calcRes">计算 : 5 +6 结果</button> {{ res }}
</template><script>
import { sum } from "../utils/calc";
export default {data() {return {res: 0,};},methods: {calcRes() {this.res = sum(5, 6);},},
};
</script>

打包结果

  1. import() 分包：
<template><button @click="calcRes">计算 : 5 +6 结果</button> {{ res }}
</template><script>
import { sum } from "../utils/calc";
export default {data() {return {res: 0,};},methods: {calcRes() {this.res = import(/* webpackChunkName: "calc" */ "../utils/calc").then(({ sum }) => {this.res = sum(5, 6);});},},
};
</script>

在这里插入图片描述

在这里插入图片描述

  1. 自动分包：Webpack 的SplitChunksPlugin插件可以自动分析模块依赖关系，将共享模块提取到单独的包中 ， 供我们自定义更加细粒度的分包策略
  optimization: {splitChunks: {chunks: 'all', // all, async, and initialminChunks :10,// 当包大于1000byte，就拆分maxSize: 1000,// 拆分的每个包不能小于500byteminSize: 500,cacheGroups:{utils: {test: /utils/,filename: '[id]_utils.js'}}},},

在这里插入图片描述

  1. 多入口分包：通过entry属性手动定义多个入口点，Webpack 会为每个入口点生成一个独立的包。

Tree Shaking

Tree Shaking 是移除代码中未引用部分的过程，它利用了 ES2015 模块的静态结构特性。

原理

  1. 一是先「标记」出模块导出值中哪些没有被用过
  2. 二是使用 Terser 删掉这些没被用到的导出代码

实现条件：

  1. 使用 ES2015 模块：确保项目使用import和export语法。
  2. 配置sideEffects：在package.json中添加 "sideEffects": false字段，告诉 Webpack 哪些文件是纯模块，可以安全地进行 Tree Shaking。
  3. 在配置中开始标记optimization.usedExports = true, 将构建设置成生产模式 mode ='production'

解决 treeShaking 无效方案：

  1. @babel/preset-env 或 babel-preset-env 不要将 target 设置为 node
  2. 第三方包中的 "sideEffects": false

示例代码：

我们安装 loadsh-es包来测试，它比 lodash 包更好的 tree-shaking

yarn add lodash-es
yarn add terser-webpack-plugin -D

  
<button @click="log">防抖函数</button><script>import { debounce } from 'lodash-es';export default {methods: {log: debounce(()=>console.log("log...."), 500),}}
</script>

更新配置文件：

 optimization: {minimize: true,minimizer: [new TerserPlugin()],usedExports: true,},

打包结果：可以看到结果中只有loadsh-es包的 debunce函数

在这里插入图片描述

热更新（HMR）

热更新允许在开发过程中实时更新应用，而无需刷新页面。

  1. 配置webpack-dev-server：通过webpack-dev-server提供热更新服务。
  2. 使用HotModuleReplacementPlugin：在 Webpack 配置中添加此插件，实现模块的热替换。
devServer：{hot：true
}plugins: [new webpack.HotModuleReplacementPlugin()
]mounted() {if (module.hot) {module.hot.accept('./Hello.vue', () => {});}},

相关文章：

Webpack 特性探讨：CDN、分包、Tree Shaking 与热更新

文章目录 前言包准备CDN 集成代码分包Tree Shaking原理实现条件&#xff1a;解决 treeShaking 无效方案&#xff1a;示例代码&#xff1a; 热更新&#xff08;HMR&#xff09; 前言 Webpack 作为现代前端开发中的核心构建工具&#xff0c;提供了丰富的特性来帮助开发者优化和打…...

编程日记 2024/9/30 4:45:21

Robot Operating System——一组三维空间中的位姿（位置和方向）

大纲 应用场景1. 机器人导航场景描述具体应用 2. 运动规划场景描述具体应用 3. 物体识别和跟踪场景描述具体应用 4. 环境建模场景描述具体应用 5. 仿真环境场景描述具体应用 定义字段解释 案例 geometry_msgs::msg::PoseArray 是 ROS 2 中的一个消息类型&#xff0c;用于表示一…...

编程日记 2024/9/30 4:43:19

mycat读写分离中间件

5、部署Mycat读写分离中间件服务 5.1安装Mycat服务 将Mycat服务的二进制软件包Mycat-server-1.6-RELEASE-20161028204710-linux.tar.gz上传到Mycat虚拟机的/root目录下&#xff0c;并将软件包解压到/use/local目录中 5.2赋予解压后的mycat目录权限 5.3向/etc/profile系统变量…...

编程日记 2024/9/30 4:42:18

Growthly Quest 增长工具：助力 Web3 项目实现数据驱动的增长

作者&#xff1a;Stella L (stellafootprint.network) 在瞬息万变的 Web3 领域&#xff0c;众多项目在用户吸引、参与和留存方面遭遇重重难关。Footprint Analytics 推出 Growthly&#xff0c;作为应对这些挑战的全方位解决方案&#xff0c;其中创新性的 Quest&#xff08;任务…...

编程日记 2024/9/30 4:41:17

Pytorch 学习手册

零 相关资料 官方网址 官方网址下的API搜索网站 一 定义 深度学习框架是用于设计、训练和部署深度学习模型的软件工具包。这些框架提供了一系列预定义的组件&#xff0c;如神经网络层&#xff08;卷积层、全连接层等&#xff09;、损失函数、优化器以及数据处理工具&#xf…...

编程日记 2024/9/30 4:39:15

第十一章 【前端】调用接口（11.1）——Vite 环境变量

第十一章 【前端】调用接口 11.1 Vite 环境变量 参考&#xff1a;https://cn.vitejs.dev/guide/env-and-mode.html Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。为了防止意外地将一些环境变量泄漏到客户端&#xff0c;只有以 VITE_ 为前缀的变量才会暴露给经过 …...

编程日记 2024/9/30 4:38:13

MySQL添加时间戳字段并且判断插入或更新时间

文章目录 步骤 1: 修改表结构步骤 2: 插入或更新数据步骤 3: 查询数据并判断时间完整示例 在MySQL中&#xff0c;可以在表中添加一个时间戳字段来记录每条数据的最后插入或更新时间。然后&#xff0c;在插入或更新数据时&#xff0c;自动更新这个时间戳字段。最后&#xff0c;在…...

编程日记 2024/9/30 4:37:13

SOA（面相服务架构）

目录 SOA的基本概念 SOA的关键特性 SOA的实现步骤 SOA的技术实现 SOA的应用场景 面向服务的架构（Service-Oriented Architecture, SOA）是一种软件设计理念和架构模式，旨在通过网络协议将不同的服务相互连接和集成，以构建灵活、可扩展和可重用的应用系统。SOA的…...

编程日记 2024/9/30 4:35:11

One2many（一对多）关联场景中，如何从模型（一）关联到模型（多）的某个字段

好的&#xff0c;我们用一个更通俗的例子来解释不同模块之间的模型关联&#xff0c;场景是“学校和学生”的例子。 1. 场景介绍 假设我们有两个模块&#xff1a; 学校模块 (school)&#xff1a;用于管理学校信息。学生模块 (student)&#xff1a;用于管理学生信息。 每个学…...

编程日记 2024/9/30 4:34:10

LLaMA 3 和 OpenAI有哪些相同点和不同点？

LLaMA 3&#xff08;Meta 的 LLaMA 系列&#xff09;和 OpenAI 的模型&#xff08;如 GPT 系列&#xff09;都是先进的 大语言模型&#xff08;LLMs&#xff09;&#xff0c;它们在训练、应用场景和能力上有很多相似之处&#xff0c;但也存在显著的不同点。以下是一些关键相同点…...

编程日记 2024/9/30 4:33:08

Spring 事务管理及失效总结

所谓事务管理&#xff0c;其实就是“按照给定的事务规则来执行提交或者回滚操作”。 Spring 并不直接管理事务&#xff0c;而是提供了多种事务管理器&#xff0c;他们将事务管理的职责委托给 Hibernate 或者 JTA 等持久化机制所提供的相关平台框架的事务来实现。 Spring 事务…...

编程日记 2024/9/30 4:32:07

全局思维下的联合创新：华为携手ISV伙伴助推银行核心平稳升级

文 | 螳螂观察 作者 | 李永华 随着数字金融快速发展&#xff0c;对核心系统提出了“海量、高效、弹性、扩展、敏捷”等新需求&#xff0c;区域性银行面临核心系统升级的迫切需要&#xff0c;对金融科技厂商而言也催生了庞大的机遇和空间。 只是&#xff0c;银行核心系统是金…...

编程日记 2024/9/30 4:31:06

深度估计任务中的有监督和无监督训练

在计算机视觉领域&#xff0c;深度估计任务一直是研究的热点之一。它旨在通过图像或视频数据来推断场景中物体与相机之间的距离&#xff0c;为许多应用提供关键信息&#xff0c;如自动驾驶、机器人导航、增强现实等。在深度估计任务中&#xff0c;有监督训练和无监督训练是两种…...

编程日记 2024/9/30 4:30:05

扩散模型DDPM代码实践

安装diffusers pip install diffusers 按照diffusers官方代码 from diffusers import DDPMPipelinepipe DDPMPipeline.from_pretrained("google/ddpm-cat-256")image pipe().images[0]image.save("/data/zhz/projects/diffusion/output/ddpm_generated_imag…...

编程日记 2024/9/30 4:29:04

关于GPIO输入模式的配置选择

GPIO&#xff08;通用输入输出&#xff09;口是嵌入式系统中的重要组成部分&#xff0c;输入模式使得微控制器能够与外部世界进行交互。本文将探讨GPIO输入模式中的浮空输入、上拉输入和下拉输入的配置、使用场景及注意事项&#xff0c;并提供一些决策指导&#xff0c;帮助读者…...

编程日记 2024/9/30 4:19:58

【Kubernetes】日志平台EFK+Logstash+Kafka【实战】

一&#xff0c;环境准备 &#xff08;1&#xff09;下载镜像包&#xff08;共3个&#xff09;&#xff1a; elasticsearch-7-12-1.tar.gz fluentd-containerd.tar.gz kibana-7-12-1.tar.gz &#xff08;2&#xff09;在node节点导入镜像&#xff1a; ctr -nk8s.io images i…...

编程日记 2024/9/30 4:18:57

今天推荐一个文档管理系统 Dorisoy.Pan

Dorisoy.Pan 是一个基于 .NET 8 和 WebAPI 构建的文档管理系统&#xff0c;它集成了 Autofac、MediatR、JWT、EF Core、MySQL 8.0 和 SQL Server 等技术&#xff0c;以实现一个简单、高性能、稳定且安全的解决方案。 这个系统支持多种客户端&#xff0c;包括网站、Android、iO…...

编程日记 2024/9/30 4:16:55

【RocketMQ】消费失败重试与死信消息

&#x1f3af; 导读&#xff1a;本文档详细介绍了RocketMQ中的重试机制与死信消息处理方法。对于生产者而言&#xff0c;文档提供了如何配置重试次数的具体示例&#xff1b;而对于消费者&#xff0c;它解释了默认情况下消息消费失败后的重试策略&#xff0c;并展示了如何通过代…...

编程日记 2024/9/30 4:15:54

注册安全分析报告：闪送

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…...

编程日记 2024/9/30 4:14:53

SpringCloud入门

SpringCloud 原版笔记&#xff1a;狂神说笔记——SpringCloud快速入门23 - subeiLY - 博客园 (cnblogs.com) 一.前言 常见面试题 什么是微服务&#xff1f; 微服务之间是如何独立通讯的&#xff1f; SpringCloud 和 Dubbo有哪些区别&#xff1f; SpringBoot和SpringCloud&…...

编程日记 2024/9/30 4:13:52

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/7/10 6:25:54

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/9/11 18:17:34

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/9/12 22:07:56

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/9/13 17:45:27

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/9/9 14:59:47

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/9/9 14:49:12

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/8/18 17:38:23

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/9/4 7:05:35

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/9/7 8:51:50

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/9/7 8:51:23