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

深度解析 Vue 项目 Webpack 分包与合包一文读懂

news 来源：原创 2025/8/27 0:31:44

深度解析 Vue 项目 Webpack 分包与合包一文读懂

在这里插入图片描述

文章目录

深度解析 Vue 项目 Webpack 分包与合包一文读懂
- 一、Webpack 打包机制深度解析
- - 1.1 模块化系统的本质
  - 1.2 Webpack 构建流程解析
  - 1.3 默认打包的问题分析
- 二、分包策略深度配置
- - 2.1 SplitChunksPlugin 核心配置
  - 2.2 精细化分包方案
  - - 2.2.1 基础库独立分包
    - 2.2.2 动态路由分包
- 三、合包策略优化实践
- - 3.1 合理合并小文件
  - 3.2 合并策略性能对比
- 四、Vue 项目专项优化
- - 4.1 异步组件加载优化
  - 4.2 路由懒加载策略
- 五、企业级项目实战
- - 5.1 电商平台优化案例
  - 5.2 配置模板
- 六、监控与调优
- - 6.1 分析工具使用
  - 6.2 关键指标监控
- 七、完整代码示例
- - 7.1 基础配置模板
  - 7.2 动态导入组件
- 八、深度优化策略
- - 8.1 持久化缓存方案
  - 8.2 核心依赖外置
- 九、前沿技术演进
- - 9.1 Webpack 5 新特性
  - 9.2 与 Vite 的对比选择

一、Webpack 打包机制深度解析

1.1 模块化系统的本质

JavaScript 模块化发展历程：

timelinetitle JS模块化演进1999 : 脚本标签混用2009 : CommonJS规范2015 : ES Modules标准2016 : Webpack成为主流

1.2 Webpack 构建流程解析

1.3 默认打包的问题分析

典型未经优化的打包结果：

dist/
├─ js/├─ app.8a3b2.js     # 1.8MB├─ vendor.7c6d5.js  # 980KB└─ 3rd-party.4e5f6.js # 650KB

性能瓶颈表现：

指标	未优化结果	健康阈值
首屏JS体积	2.5MB	<1MB
重复代码率	38%	<15%
缓存命中率	45%	>85%
动态加载时间	2.8s	<1s

二、分包策略深度配置

2.1 SplitChunksPlugin 核心配置

// vue.config.js
module.exports = {configureWebpack: {optimization: {splitChunks: {chunks: 'all',minSize: 20000,maxAsyncRequests: 6,maxInitialRequests: 4,cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10,reuseExistingChunk: true},common: {minChunks: 2,priority: -20,reuseExistingChunk: true}}}}}
}

2.2 精细化分包方案

2.2.1 基础库独立分包

cacheGroups: {vue: {test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,name: 'vue-runtime',chunks: 'all'},elementUI: {test: /[\\/]node_modules[\\/]element-ui[\\/]/,name: 'element-ui',chunks: 'all'}
}

2.2.2 动态路由分包

// router.js
const UserProfile = () => import(/* webpackChunkName: "user" */ './views/UserProfile.vue')
const Dashboard = () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue')

三、合包策略优化实践

3.1 合理合并小文件

cacheGroups: {utilities: {test: /[\\/]src[\\/]utils[\\/]/,minSize: 0,minChunks: 2,priority: 5},components: {test: /[\\/]src[\\/]components[\\/]/,minSize: 0,minChunks: 3,priority: 10}
}

3.2 合并策略性能对比

合并方式	文件数量	总大小	加载时间
未合并	48	4.2MB	3.8s
自动合并	22	3.9MB	2.1s
智能合并	18	3.7MB	1.4s

四、Vue 项目专项优化

4.1 异步组件加载优化

// 高阶异步加载组件
const AsyncComponent = () => ({component: import('./MyComponent.vue'),loading: LoadingComponent,error: ErrorComponent,delay: 200,timeout: 3000
})

4.2 路由懒加载策略

// 带预加载的路由配置
const routes = [{path: '/dashboard',component: () => import(/* webpackPrefetch: true *//* webpackChunkName: "dashboard" */'./views/Dashboard.vue')}
]

五、企业级项目实战

5.1 电商平台优化案例

优化前 vs 优化后对比：

bartitle 性能指标对比xAxis 首屏时间, 可交互时间, 总包体积yAxis 时间(ms), 体积(MB)series 优化前: 4200, 3800, 8.2series 优化后: 1200, 900, 3.5

5.2 配置模板

// vue.config.js
module.exports = {chainWebpack: config => {config.optimization.splitChunks({chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name(module) {const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]return `vendor.${packageName.replace('@', '')}`}}}})}
}

六、监控与调优

6.1 分析工具使用

# 安装分析插件
npm install --save-dev webpack-bundle-analyzer# 生成分析报告
vue-cli-service build --report

6.2 关键指标监控

指标	监控方法	健康阈值
首屏资源大小	Chrome DevTools Network	<3MB
未使用代码比例	Webpack Bundle Analyzer	<15%
缓存命中率	HTTP缓存头分析	>85%
动态加载时间	Performance API	<1s

七、完整代码示例

7.1 基础配置模板

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = defineConfig({transpileDependencies: true,configureWebpack: {plugins: [new BundleAnalyzerPlugin({analyzerMode: process.env.NODE_ENV === 'production' ? 'static' : 'disabled'})],optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vue: {test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,name: 'vue-vendors',priority: 20},charts: {test: /[\\/]node_modules[\\/](echarts|highcharts)[\\/]/,name: 'chart-vendors',priority: 15},utilities: {test: /[\\/]src[\\/]utils[\\/]/,minChunks: 2,name: 'common-utils',priority: 5}}}}},chainWebpack: config => {config.plugin('preload').tap(options => {options[0].include = 'allChunks'return options})}
})

7.2 动态导入组件

// router/index.js
const routes = [{path: '/user/:id',component: () => import(/* webpackChunkName: "user-profile" *//* webpackPrefetch: true */'@/views/UserProfile.vue'),children: [{path: 'settings',component: () => import(/* webpackChunkName: "user-settings" */'@/components/user/SettingsPanel.vue')}]}
]

八、深度优化策略

8.1 持久化缓存方案

// 文件名哈希策略
output: {filename: '[name].[contenthash:8].js',chunkFilename: '[name].[contenthash:8].chunk.js'
}

8.2 核心依赖外置

// vue.config.js
module.exports = {configureWebpack: {externals: process.env.NODE_ENV === 'production' ? {vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex'} : {}}
}

九、前沿技术演进

9.1 Webpack 5 新特性

9.2 与 Vite 的对比选择

维度	Webpack	Vite
构建速度	较慢	极快
生态成熟度	非常成熟	发展中
配置复杂度	高	低
适合场景	复杂企业级应用	现代轻量级应用

在这里插入图片描述

深度解析 Vue 项目 Webpack 分包与合包一文读懂

深度解析 Vue 项目 Webpack 分包与合包一文读懂文章目录深度解析 Vue 项目 Webpack 分包与合包一文读懂一、Webpack 打包机制深度解析1.1 模块化系统的本质1.2 Webpack 构建流程解析1.3 默认打包的问题分析二、分包策略深度配置2.1 SplitChunksPlugin 核心配置2.2 精细化分…...

编程日记 2025/8/27 0:31:44

【ROS】map_server 地图的保存和加载

【ROS】map_server 地图的保存和加载前言地图的保存地图的加载前言在 ROS 中，想要实现导航功能，首先需要一张已建好的地图。导航系统依赖这张地图进行路径规划、定位和障碍物避让等操作。本文将讲解在使用 gmapping 或 hector_mapping 建图后&#x…...

编程日记 2025/8/26 2:51:36

【计网】SSL/TLS核心原理

序言在HTTP协议中，信息是明文传输的，因此为了通信安全就有了HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer)协议。HTTPS也是一种超文本传送协议，在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务端的…...

编程日记 2025/8/26 5:21:19

sqli-labs靶场 less 11

文章目录 sqli-labs靶场less 11 POS联合注入 sqli-labs靶场每道题都从以下模板讲解，并且每个步骤都有图片，清晰明了，便于复盘。 sql注入的基本步骤注入点注入类型字符型：判断闭合方式 （‘、"、’、“”&…...

编程日记 2025/8/25 22:45:48

陕化之光（原创）

当城市在和周公化合陕化的工装已与朝霞发生反应工人先锋号已然吹响陕化工人游走在工作的床层钢铁森林间穿梭的身影是沉默的催化剂让冰冷的方程式绽放出最活跃的分子温度扳手与阀门对话时塔林正在记录关于电流与压力的学习笔记每一次精确的调控都是舞台上…...

编程日记 2025/8/26 17:52:54

【刷题2025】高级数据结构（并查集+优先队列+图论）

1.并查集（1）基础理论并查集是一种树形的数据结构，用于处理一些不相交集合的合并及查询问题。比如，可以用并查集判断一个森林中有几棵树、某个节点是否属于某棵树。并查集由一个整形数组 pre[] 和两个函数 find() 、 join() 构成。数组 pre[] 记录了每个点的前驱…...

编程日记 2025/8/25 20:27:19

数据库性能优化(sql优化)_分布式优化思路01_yxy

数据库性能优化_分布式优化思路01 1 分布式数据库的独特挑战2 分布式新增操作符介绍2.1 数据交换操作符(ESEND/ERECV)：2.2 数据迭代操作符GI：3 核心优化策略(一)_分区裁剪优化3.1 普通分区裁剪3.2 动态分区裁剪1 分布式数据库的独特挑战在分布式数据库系统中，核心为数据被…...

编程日记 2025/8/26 10:54:28

云服务器和物理服务器有什么区别

云服务器与物理服务器的核心区别在于资源分配方式、性能稳定性、成本结构、运维管理及适用场景。以下是具体分析: 一、资源分配与架构差异云服务器:基于虚拟化技术,将物理服务器集群分割为多个虚拟实例，资源由多个用户共享，可根据需求弹性调整配置…...

编程日记 2025/8/26 15:49:39

FPGA-DDS技术的波形发生器

1.实验目的 1.1掌握直接数字频率合成（DDS）的基本原理及其实现方法。 1.2在DE2-115 FPGA开发板上设计一个可调频率的正弦波和方波发生器，频率范围10Hz~5MHz，最小分辨率小于1kHz。 1.3使用Quartus II进行仿真，并通过S…...

编程日记 2025/8/20 2:07:07

晶晨线刷工具下载及易错点说明：Key文件配置错误／mac剩余数为0解决方法

晶晨线刷工具下载及易错点说明：Key文件配置错误／mac剩余数为0解决方法各种版本晶晨线刷工具下载： 晶晨线刷工具易出错点故障解决方法： 1、晶晨线刷工具加载固件的时候提示mac红字且剩余数为0的解决办法很多同学可能会与遇到加…...

编程日记 2025/8/26 0:41:31

idea如何使用git

在 IntelliJ IDEA 中使用 Git 的详细步骤如下，分为配置、基础操作和高级功能，适合新手快速上手： 一、配置 Git 安装 Git 下载并安装 Git，安装时勾选“Add to PATH”。验证安装：终端输入 git --version 显示版本…...

编程日记 2025/8/26 17:05:08

python——学生管理系统

学生管理系统主要分为以下三个大类： 一、用户类（User）： 属性：用户名（username）、密码（password） 功能：注册（register）、登录&#…...

编程日记 2025/8/25 19:41:09

快速幂+公共父节点

# 快速幂求：23的10000次幂，那么就是求23的5000次幂，因为2350*235023^100;所以可以遍历log(n)次 int res1; int tmp23; for(int i1;i<logn;i) {tmp*tmp; }显然，我们无法通过logn计算次数； 比如是非偶数的怎么计算呢…...

编程日记 2025/8/26 10:51:30

【差分隐私相关概念】瑞丽差分隐私（RDP）命题4

命题4的证明详解（分情况讨论） 背景与设定机制： f : D → R f: \mathcal{D} \to \mathcal{R} f:D→R 是由 n n n 个 ϵ \epsilon ϵ-差分隐私机制自适应组合而成。相邻输入： D D D 和 D ′ D D′ 是相邻数据集。目标&#xf…...

编程日记 2025/8/26 13:22:22

Vue 人看 React useRef：它不只是替代 ref

如果你是从 Vue 转到 React 的开发者，初见 useRef 可能会想：这不就是 React 版的 ref 吗？但真相是 —— 它能做的，比你想象得多得多。 👀 Vue 人初见 useRef 在 Vue 中，ref 是我们访问 DOM 或响应式数据的…...

编程日记 2025/8/25 16:22:29

C++第三方库【JSON】nlohman/json

文章目录优势使用API从文件中读取json从json文本创建json对象直接创建并操作json对象字符串 <> json对象文件流 <> json对象从迭代器读取像使用STL一样的访问STL容器转化为 json数组STL容器转 json对象自定义类型转化为 json对象限制优势直观的语法&#xff…...

编程日记 2025/8/25 19:12:44

从源码到实战：深度解析rsync增量同步机制与高级应用 #mermaid-svg-C1ZMwvhtq4iP4E8m {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-C1ZMwvhtq4iP4E8m .error-icon{fill:#552222;}#mermaid-svg-C1ZMwvht…...

编程日记 2025/8/25 20:16:13

数据库表设计五层分类系统表设计

文章目录数据库表设计五层分类系统表设计代码思路详解类概述核心方法详解1. processString(String input) 方法2. createNo(String input, boolean peerNode) 方法3. isParent(String parentNo, String sonNo) 方法编号系统设计使用场景推测代码特点可能的使用示例 NoProcess…...

编程日记 2025/8/26 6:53:11

Centos/RedHat 7.x服务器挂载ISCSI存储示例（无多路径非LVM）

客户让帮忙挂载个ISCSI存储，大概结构如下图所示： ISCSI存储为一台安装了truenas的X86服务器，提供存储服务的IP地址为10.16.0.1 服务器的ETH1网卡配置与10.16.0.1同段网络。为了给客户做个简单培训，整理了一下操作步骤。下面是配…...

编程日记 2025/8/26 15:50:07

【android bluetooth 协议分析 21】【ble 介绍 2】【什么是IRK,是如何生成和传递的】

1. 什么是 IRK？ IRK，全称 Identity Resolving Key（身份解析密钥），是 BLE 设备用于生成和解析 Resolvable Private Address（RPA） 的密钥。 2. IRK 的生成和传递过程 IRK 是在 BLE 配对&#xf…...

编程日记 2025/8/26 12:40:17

4.14-4.15学习总结 IO流：缓冲流+转换流+序列化流+打印流+压缩流+Commons—io工具包+Hutool工具包

图片加密操作： import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; public class test {public static void main(String[] args) throws IOException {FileInputStream fisnull;FileOutputStream fosnull;try{fisnew…...

编程日记 2025/8/26 17:40:47

Linux入门学习笔记

一、文件路径相关相对路径与绝对路径相对路径：是从当前工作目录开始表示文件或目录位置的路径。例如，当前在 /home/user 目录下，若要访问 user 目录下 test 文件夹中的 file.txt 文件，相对路径就是 test/file.txt 。它依赖于当…...

编程日记 2025/8/25 4:30:23

Redis适用场景

Redis适用场景一、加速缓存二、会话管理三、排行榜和计数器四、消息队列五、实时分析六、分布式锁七、地理位置数据八、限流九、数据共享十、签到一、加速缓存 Redis最常见的应用之一是作为缓存层，用于存储频繁访问的数据，从而减轻数据库的负载。通过…...

编程日记 2025/8/23 1:49:54

# WPS打开新文档，“工具”菜单下是空白

WPS打开新文档，“工具”菜单下是空白在 WPS 中打开新文档后 “工具” 菜单下空白，可能由多种原因导致，如下图： 下面分析并给出对应的解决办法： 一、功能区显示设置问题 1、原因： WPS 的功能区显示可能…...

编程日记 2025/8/21 22:41:43

【软考-架构】13.3、架构复用-DSSA-ABSD

✨资料&文章更新✨ GitHub地址：https://github.com/tyronczt/system_architect 文章目录 1、软件架构复用2、特定领域软件架构DSSADSSA的三个基本活动参与DSSA的四种角色人员建立DSSA的过程三层次模型考试真题第一题第二题 3、基于架构的软件开发ABSD的软件开发…...

编程日记 2025/8/18 19:36:20

K8S_ResourceQuota与LimitRange的作用

ResourceQuota 作用详解资源总量控制：ResourceQuota能对命名空间内的资源使用总量进行限制。在一个Kubernetes集群中，存在多个命名空间，每个命名空间可看作一个独立的工作单元。通过设置ResourceQuota，可以防止某个命名空间过度…...

编程日记 2025/8/26 20:32:30

T101D加固平板电脑：无人机地面站的高效智能控制核心

随着无人机技术在应急救援、农业监测、军事侦察等领域的广泛应用，对地面控制设备的要求也日益提高。鲁成伟业推出的T101D加固平板电脑凭借其高性能、强防护和专业化设计，成为无人机地面站的核心控制终端，为复杂环境下的作业提供了可靠支持。 …...

编程日记 2025/8/25 14:18:38

LLM中的N-Gram、TF-IDF和Word embedding

文章目录 1. N-Gram和TF-IDF：通俗易懂的解析1.1 N-Gram：让AI学会"猜词"的技术1.1.1 基本概念1.1.2 工作原理1.1.3 常见类型1.1.4 应用场景1.1.5 优缺点 1.2 TF-IDF：衡量词语重要性的尺子1.2.1 基本概念1.2.2 计算公式1.2.3 为什么需…...

编程日记 2025/8/22 20:19:11

【基于Servlet技术处理表单】

文章目录一、实验背景与目的二、实验设计与实现思路1. 功能架构2. 核心代码实现3. 测试用例总结一、实验背景与目的本次实验旨在深入理解Servlet工作原理，掌握JSP与Servlet的协同开发，实现前端表单与后端数据处理的交互。具体目标包括：设…...

编程日记 2025/8/23 5:00:58

【差分隐私相关概念】瑞丽差分隐私（RDP）-瑞丽散度约束了贝叶斯因子后验变化

分步解释和答案： 在Rnyi差分隐私（RDP）框架中，通过贝叶斯因子和Rnyi散度的关系可以推导出关于后验变化的概率保证。以下是关键步骤的详细解释： 1. 贝叶斯因子的定义与分解设相邻数据集 D D D 和 D ′ D D′&#x…...

编程日记 2025/8/21 22:15:32

Oracle查询大表的全部数据

2000w的大表表结构如下，其中id是索引查询处理慢的写法 List<String> queryLoidForPage(Integer startNum,Integer endNum){try {Connection oracleConnection initBean.oracleConnection;Statement stmt oracleConnection.createStatement();// 4.执行查…...

编程日记 2025/8/20 18:47:28

linux 内核 static-key机制分析

1、static key是什么 Linux内核的 Static Keys机制是一种高效的条件分支优化技术,主要用于在运行时动态启用或禁用特定代码路径,同时‌避免常规条件判断(如 if 语句)的性能开销‌。它通过结合编译时优化和运行时代码修补(如 Jump Label 技术)实现近乎零成本的开关切换,广泛应用…...

编程日记 2025/8/22 19:40:43

【Java学习】Knife4j使用流程

手动添加依赖，并刷新Maven <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi2-spring-boot-starter</artifactId><version>4.3.0</version> </dependency>在配置文件application.…...

编程日记 2025/8/20 15:42:24

Java 基本操作快速入门：理解与实践

在软件开发的世界里，Java 作为一种广泛使用的编程语言，已经成为构建企业级应用、移动应用甚至大型系统的主力军。对于任何一位初学者来说，理解 Java 的基本操作是学习编程的第一步。从变量声明到控制流的结构，每一个基础知识点都是…...

编程日记 2025/8/26 11:10:36

jetson orin nano 开发板conda 的 base 环境在 shell 启动时自动激活

使用MobaXterm_Personal_23.0.exe 连接jetson开发板时默认是不进入base环境的 1.输入此命令nano ~/.bashrc看到图1后把conda activate 你的环境名放到图中标记位置然后保存退出： Ctrl O 回车保存 Ctrl X 退出编辑器输入此命令后，source ~/.bas…...

编程日记 2025/8/26 21:59:08

【高中数学/指数/对数】同构六君子之 x/e^x/lnx组合曲线

yx*e^x ye^x/x yx/e^x yx*lnx ylnx/x yx/lnx END...

编程日记 2025/8/25 4:06:04

Golang｜在线排查协程泄漏

根据我们的代码，前5毫秒内，每隔1毫秒就会来一个请求，5毫秒之后由于前面的协程执行完，后面又会来新的协程，所以协程数目会保持稳定但是代码一运行，协程数量一直增长，发生了协程泄漏我们可以list…...

编程日记 2025/8/25 23:34:00

健康养生指南

在快节奏的现代生活中，健康养生愈发重要，它是我们享受美好生活的基石。饮食是养生的关键一环。秉持均衡原则，每日保证谷类、蔬果、优质蛋白等各类食物合理摄入。多吃富含膳食纤维的粗粮，像燕麦、糙米，可促进肠道蠕…...

编程日记 2025/8/25 9:32:08

实验二两个多位十进制数相加实验

一、实验目的 1．掌握汇编子程序的编写方法。 2．掌握循环程序的设计方法。二、实验内容将键盘输入的两个5位十进制数相加，在屏幕上显示相加的结果。三、实验要求 1．显示格式：被加数加数相加的结…...

编程日记 2025/8/25 23:35:28

多模态大模型MLLM基础训练范式 Pre-train + Instruction FineTuning

多模态大模型Pre-train 为了在图文嵌入空间中更好地对齐视觉和文本信息。为此，使用图像-文本对（image-caption style data），表示为 ( X , Y a ) (\mathbf{X}, Y_a) (X,Ya)，其中： X \mathbf{X} X&#x…...

编程日记 2025/8/25 23:34:44

2025.4.15六年之约day11

六年之约已经断更好几个月了，当初六年之约是当做日记来写的，然后被同事刷到了，被谈及的时候挺尴尬的，毕竟里面记录的是我的所思所想。在互联网下，是不适合发布日记的，但我又爱记录所思所想所做。不知道距…...

编程日记 2025/8/23 8:23:46

Rust学习之实现命令行小工具minigrep（二）

Rust学习之实现命令行小工具minigrep（二） Rust学习之实现命令行小工具minigrep（一） 前言继续记录一下Rust 语言学习过程，上次写了一个命令行查找字符串的小项目minigrep。学习完了闭包（Closures&#x…...

编程日记 2025/8/25 23:38:47

Access Token 和 Refresh Token 的双令牌机制，维持登陆状态

目录 1. 双令牌机制2. 工作流程3. 客户端实现4. 服务器端实现5. 注意事项拓展：Token在客户端安全存储的几种方式为了实现客户端在 JWT Token 过期后自动更新 Token，通常会采用 Access Token 和 Refresh Token 的双令牌机制。以下是实现自动更新 Token 的…...

编程日记 2025/8/25 23:39:38

前端 -- uni-app 的 splitChunks 分包详解与实战！

全文目录：开篇语📝 前言📖 目录🌟 什么是 splitChunks？🛠 splitChunks 的核心原理📂 文件拆分的机制⚙️ 配置选项✨ splitChunks 实战案例1️⃣ 项目初始化2️⃣ 编写页面逻辑3️⃣ 配置 splitChunks4️⃣ 查看效果🧩 splitChunks 的高级用法与优化🔍 优化一…...

编程日记 2025/8/25 23:39:40

【教程】检查RDMA网卡状态和测试带宽 | 附测试脚本

转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ 目录检查硬件和驱动状态测试RDMA通信报错修复对于交换机的配置，可以看这篇： 【教程】详解配置多台主机通过交换机实现互…...

编程日记 2025/8/25 23:39:39

OSPF的拓展配置

OSPF的拓展配置 1，ospf的手工认证 1，接口认证 r1: display ospf peer brief （查看邻居关系） int g 0/0/0 ospf authentication-mode md5 1 cipher 123456 display this r2: ospf authentication-mode md5 1 plain 12345…...

编程日记 2025/8/25 5:43:42

http、https、TLS、证书原理理解，对称加密到非对称加密问题，以及对应的大致流程

http 超文本传输协议存在问题： 安全性、隐私性、数据完整性易被中间人（黑客之类的）对数据进行劫持、篡改、隐私泄露引出了 https （source） http 在网络模型中的应用层 Application > transport > inter…...

编程日记 2025/8/25 22:31:28

vscode格式化为什么失效？自动保存和格式化（Prettier - Code formatter，vue-format）

vscode自动格式化保存最终配置博主找了好多的插件，也跟着教程配置了很多，结果还是没有办法格式化，最终发现了一个隐藏的小齿轮，配置完后就生效了关键步骤关键配置一定要点小齿轮！！！ 这个小…...

编程日记 2025/8/25 23:35:28

两类中断控制器处理流程_链式和层级

今天呢，我们来用一种新的视角去看中断子系统，然后仿照人家的方法去写一个虚拟的中断子系统，我们先来讲讲链式和层级： 链式中断控制器(chained)： 上图中，左边的"chained intc"就是链式中断控制器…...

编程日记 2025/8/25 23:40:49

软件测试之接口测试用例设计

1.接口测试用例设计简介我们对系统的需求分析完成之后，即可设计对应的接口测试用例，然后用接口测试用例进行接口测试。接口测试用例的设计也需要用到黑盒测试方法，其与功能测试用例设计的方法类似，接口测试用例设计中还需要增加…...

编程日记 2025/8/25 23:42:07

深度解析 Vue 项目 Webpack 分包与合包 一文读懂

文章目录

一、Webpack 打包机制深度解析

1.1 模块化系统的本质

1.2 Webpack 构建流程解析

1.3 默认打包的问题分析

二、分包策略深度配置

2.1 SplitChunksPlugin 核心配置

2.2 精细化分包方案

2.2.1 基础库独立分包

2.2.2 动态路由分包

三、合包策略优化实践

3.1 合理合并小文件

3.2 合并策略性能对比

四、Vue 项目专项优化

4.1 异步组件加载优化

4.2 路由懒加载策略

五、企业级项目实战

5.1 电商平台优化案例

5.2 配置模板

六、监控与调优

6.1 分析工具使用

6.2 关键指标监控

七、完整代码示例

7.1 基础配置模板

7.2 动态导入组件

八、深度优化策略

8.1 持久化缓存方案

8.2 核心依赖外置

九、前沿技术演进

9.1 Webpack 5 新特性

9.2 与 Vite 的对比选择

相关文章：

深度解析 Vue 项目 Webpack 分包与合包一文读懂