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

深度解析Vue项目Webpack打包分包策略从基础配置到高级优化，全面掌握性能优化核心技巧

news 来源：原创 2025/7/18 23:17:09

深度解析Vue项目Webpack打包分包策略

从基础配置到高级优化，全面掌握性能优化核心技巧

在这里插入图片描述

一、分包核心价值与基本原理

1.1 为什么需要分包

首屏加载优化：减少主包体积，提升TTI（Time to Interactive）
缓存利用率提升：独立第三方库包可长期缓存
并行加载优势：浏览器可同时下载多个chunk
按需加载支持：动态加载非关键资源

1.2 Webpack分包机制

二、Vue CLI默认分包策略分析

2.1 默认splitChunks配置

// vue.config.js
module.exports = {configureWebpack: {optimization: {splitChunks: {chunks: 'async',minSize: 20000,maxSize: 0,minChunks: 1,maxAsyncRequests: 30,maxInitialRequests: 30,automaticNameDelimiter: '~',cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}}}}}
}

2.2 默认产出结构

dist/
├── js/
│   ├── app.5d8f2e.js         # 主入口
│   ├── chunk-vendors.68a45d.js # 第三方库
│   ├── common.1a2b3c.js      # 公共模块
│   └── asyncComponent.7e6f5a.js # 异步组件

三、六大分包场景与配置实战

3.1 第三方库独立分包

目标：将Vue、Vuex等稳定依赖单独打包

// vue.config.js
configureWebpack: {optimization: {splitChunks: {cacheGroups: {vue: {test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,name: 'vue-vendors',chunks: 'all',priority: 20},elementUI: {test: /[\\/]node_modules[\\/]element-ui[\\/]/,name: 'element-ui',chunks: 'all',enforce: true}}}}
}

3.2 路由级动态加载

实现原理：利用动态import语法

// router.js
const UserDetails = () => import(/* webpackChunkName: "user" */ './views/UserDetails.vue')// 生成文件: user.xxxx.js

3.3 公共模块提取

cacheGroups: {common: {name: 'common',minChunks: 2, // 至少被两个入口引用chunks: 'initial',priority: 10,reuseExistingChunk: true}
}

3.4 运行时文件分离

// vue.config.js
module.exports = {chainWebpack: config => {config.optimization.runtimeChunk('single')}
}
// 生成 runtime.xxxx.js

3.5 CSS代码分包

// 独立CSS文件
config.plugin('extract-css').tap(args => [{filename: 'css/[name].[contenthash:8].css',chunkFilename: 'css/[name].[contenthash:8].css'}])// CSS按需加载
import(/* webpackChunkName: "styles" */ './style.css')

3.6 大文件分片

splitChunks: {chunks: 'all',maxSize: 250000, // 250KBminRemainingSize: 20000,enforceSizeThreshold: 50000
}

四、高级优化策略

4.1 预加载指令

<!-- 提前加载关键资源 -->
<link rel="preload" href="/js/vue-vendors.xxxx.js" as="script"><!-- 预取非关键资源 -->
<link rel="prefetch" href="/js/user.xxxx.js">

4.2 持久化缓存

// 文件名哈希策略
config.output.filename('js/[name].[contenthash:8].js')
config.output.chunkFilename('js/[name].[contenthash:8].js')// 模块ID固化
config.plugin('hashed-module-ids').use(require('webpack').HashedModuleIdsPlugin)

4.3 分析工具集成

# 安装分析插件
npm install webpack-bundle-analyzer --save-dev

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {configureWebpack: {plugins: [new BundleAnalyzerPlugin()]}
}

五、分包效果评估指标

指标	优化目标	测量工具
首屏资源体积	< 200KB	Chrome DevTools
主包依赖数量	< 30个	webpack-bundle-analyzer
缓存命中率	> 90%	Lighthouse
动态加载延迟	< 500ms	Performance面板

六、常见问题解决方案

6.1 分包过多导致请求数激增

对策：

合并小文件：设置maxInitialRequests: 5
HTTP/2优化：启用服务器推送
资源内联：将关键CSS/JS内联到HTML

6.2 公共模块重复打包

检测方法：

npx vue-cli-service build --report

优化方案：

调整minChunks阈值
检查模块划分合理性

6.3 动态加载白屏

优化手段：

添加加载动画
预加载策略优化
使用webpackPrefetch: true

七、配置模板与示例

7.1 完整配置示例

// vue.config.js
module.exports = {configureWebpack: {optimization: {splitChunks: {chunks: 'all',minSize: 20000,maxSize: 250000,minChunks: 1,maxAsyncRequests: 6,maxInitialRequests: 4,automaticNameDelimiter: '~',cacheGroups: {vue: {test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,name: 'vue',priority: 20},element: {test: /[\\/]node_modules[\\/]element-ui[\\/]/,name: 'element',priority: 15},commons: {name: 'commons',minChunks: 2,priority: 10,reuseExistingChunk: true}}},runtimeChunk: {name: 'runtime'}}},chainWebpack: config => {config.plugin('preload').use(require('@vue/preload-webpack-plugin'))}
}

总结与最佳实践

通过合理的分包策略，典型Vue项目可达成：

首屏加载时间缩短60%+
长期缓存利用率提升80%
动态加载性能优化50%

实施步骤建议：

使用分析工具定位瓶颈
优先分离稳定第三方库
按路由实现动态加载
设置合理的尺寸阈值
持续监控性能指标

深度解析Vue项目Webpack打包分包策略从基础配置到高级优化，全面掌握性能优化核心技巧

深度解析Vue项目Webpack打包分包策略从基础配置到高级优化，全面掌握性能优化核心技巧一、分包核心价值与基本原理 1.1 为什么需要分包首屏加载优化：减少主包体积，提升TTI（Time to Interactive）缓存利用率提升&am…...

编程日记 2025/7/18 23:17:09

MySQL——基本查询内置函数

目录 CRUD Create Retrieve where order by limit Update Delete 去重操作聚合函数聚合统计内置函数日期函数字符函数数学函数其它函数实战OJ 批量插入数据找出所有员工当前薪水salary情况查找最晚入职员工的所有信息查找入职员工时间升序排…...

编程日记 2025/7/14 14:18:21

实现图片自动压缩算法，canvas压缩图片方法

背景： 在使用某些支持webgl的图形库（eg：PIXI.js，fabric.js）场景中，如果加载的纹理超过webgl可处理的最大纹理限制，会导致渲染的纹理缺失，甚至无法显示。方案实现图片自动压缩算…...

编程日记 2025/7/14 3:57:05

零基础设计模式——创建型模式 - 单例模式

第二部分：创建型模式 - 单例模式 (Singleton Pattern) 欢迎来到创建型模式的第一站——单例模式！这是最简单也最常用的设计模式之一。核心思想：关注对象的创建过程，将对象的创建与使用分离，降低系统的耦合度。单例…...

编程日记 2025/7/15 5:54:12

数据挖掘：从数据堆里“淘金”，你的数据价值被挖掘了吗？

数据挖掘：从数据堆里“淘金”，你的数据价值被挖掘了吗？ 在这个数据爆炸的时代，我们每天都在产生海量信息：社交媒体上的点赞、网购时的浏览记录，甚至是健身手环记录下的步数。这些数据本身可能看似杂乱无章…...

编程日记 2025/7/13 8:46:29

k8s1.27版本集群部署minio分布式

需求： 1.创建4个pv，一个pv一个minio-pod。使用sts动态分配pvc(根据存储类找到pv)。----持久化 2.暴露minio的9001端口。（nodeport）----管理界面镜像：minio/minio:RELEASE.2023-03-20T20-16-18Z--->换国内源说明…...

编程日记 2025/6/29 0:48:41

雷军：芯片，手机，平板，SUV一起发

大家好，我是小悟。 5月19日，雷军在微博上宣布，5月22日晚7点将举办小米战略新品发布会。这场被官方称为“人车家全生态”战略升级的重要活动，一口气带来了小米手机SoC芯片“玄戒O1”、旗舰手机小米15S Pro、小米平板7 Ultra&…...

编程日记 2025/7/16 8:04:03

使用Dockerfile构建含私有Maven仓库依赖包的Java容器

背景需要用JDBC方式访问ArgoDB星环提供了ArgoDB jar包应用将以Container的方式运行我希望打包成镜像之后，镜像启动就能测试连接是否成功连接URL串需要能够传递进去失败的方案一：本地文件导入POM pom.xml 配置本地路径 <dependency><groupI…...

编程日记 2025/7/14 19:23:33

AI指令模板综述（Prompt Review）

文章目录 DeepSeek DeepSeek 参考：DeepSeek学术指令大全找到有价值的研究方向 "作为我的学术研究助手，你需要基于以下要求为我生成5个具有学术价值的创新选题： 请聚焦于[具体研究领域，如’社交媒体用户行为’或’深度学习…...

编程日记 2025/7/16 16:58:47

软件架构之-论分布式架构设计及其实现

论分布式架构设计及其实现摘要正文摘要 2023年2月，本人所在集团公司承接了长三角地区某省渔船图纸电子化审查项目开发，该项目旨在为长三角地区渔船建造设计院、渔船审图机构提供一个便捷化的服务平台。在次项目中，我作为项目成员参与了整个…...

编程日记 2025/7/15 17:08:16

零售EDI：Belk Stores EDI需求分析

Belk Stores 成立于 1888 年，是美国历史最悠久的家族百货连锁品牌之一，总部位于北卡罗来纳州夏洛特市。作为美国东南部领先的零售企业，Belk 在16个州拥有近300家门店，主要经营服装、鞋履、美妆、家居用品等多个品类，服…...

编程日记 2025/7/14 21:51:59

LangChain4j入门（六）整合提示词（Prompt）

前言提示词（Prompt）是用户输入给AI模型的一段文字或指令，用于引导模型生成特定类型的内容。通过提示词，用户可以告诉AI“做什么”、 “如何做”以及“输出格式”，从而在满足需求的同时最大程度减少无关信息的生成。有…...

编程日记 2025/7/13 21:50:45

【HarmonyOS 5】金融应用开发鸿蒙组件实践

【HarmonyOS 5】金融应用开发鸿蒙组件实践一、鸿蒙生态观察 2024 年 1 月 18 日： 发布原生鸿蒙操作系统星河版，面向开发者开放申请，余承东宣布鸿蒙生态设备数达 8 亿台；建设银行、邮储银行等完成鸿蒙原生应用 Beta 版本开发。 …...

编程日记 2025/7/13 15:36:49

cv2.VideoWriter_fourcc(*‘mp4v‘)生成的视频无法在浏览器展

看这个博主的博客，跟我碰到的问题的一致，都是使用AVC1写视频时报编码器不存在的异常，手动编译opencv-python或者使用conda install -c conda-forge opencv安装依赖即可。博主博客：Python OpenCV生成视频无法浏览器播放问题说明及…...

编程日记 2025/7/16 5:00:49

MD编辑器推荐【Obsidian】含下载安装和实用教程

为什么推荐 Obsidian ？ 免费 （Typora 开始收费了）Typora 实现的功能，它都有！代码块可一键复制文件目录支持文件夹大纲支持折叠、搜索特色功能 – 白板特色功能 – 关系图谱下载 https://pan.baidu.com/s/1I1fSly…...

编程日记 2025/7/16 1:36:58

新书速览|GraphPad Prism图表可视化与统计数据分析:视频教学版

《GraphPad Prism图表可视化与统计数据分析:视频教学版》本书内容《GraphPad Prism图表可视化与统计数据分析:视频教学版》以GraphPad Prism 10为平台，讲述统计分析软件GraphPad Prism的具体应用方法。在介绍《GraphPad Prism图表可视化与统计数据分析:视频教学…...

编程日记 2025/7/15 11:54:40

波峰波谷策略

这是一个基于数据分布的峰度（kurtosis）和偏度（skewness）的交易策略。当数据呈现趋势性，并且潜在趋势为正时，我们做多。当数据呈现趋势性，并且潜在趋势为负时，我们做空。当趋势发生反转后，我们平仓。那么，我们如何确定趋势和趋势的强度呢？让我们先来复习一下峰…...

编程日记 2025/7/16 8:40:49

【综述】视频目标分割VOS

目录 1、Associating Objects with Transformers for Video Object Segmentation1）背景知识2）研究方法3）实验结果4）结论 2、Rethinking Space-Time Networks with Improved Memory Coverage for Efficient Video Object Segmentat…...

编程日记 2025/7/15 9:43:27

基于线性回归的数据预测

1. 自主选择一个公开回归任务数据集（如房价预测、医疗数据、空气质量预测等，可Kaggle）。 2. 数据预处理：完成标准化（Normalization）、特征选择或缺失值处理等步骤。 3. 使用线性回归模型进行建模。采用80…...

编程日记 2025/6/29 0:24:59

一、基础饼图绘制（Matplotlib） 1. 环境准备 python 复制下载 pip install matplotlib numpy 2. 基础饼图代码 python 复制下载 import matplotlib.pyplot as plt# 数据准备 labels = [1, 2, 3, 4] sizes = [30, 25, 15, 30] # 各部分占比（总和建议100） colors…...

编程日记 2025/7/15 4:53:26

c++学习方向选择说明

文章目录前言一、什么样的人适合用c找编程相关工作二、c可以投递什么岗位三、应届生c怎么学才可以找到好工作那这样的话，校招生搞c应该怎么学才能凸显自己的优势呢？那有人就问了，那我应该学啥啊？ 四、零基础学习c路线前言做了…...

编程日记 2025/7/14 22:36:12

采集需要登录网站的教程

有些网站需要用户登录才能显示相关信息，如果要采集这类网站，有以下几个方法： 1. 写发布模块来抓包获取post的数据； 2. 有些采集器内置浏览器获取这些信息，但是经常获取的不准确，可靠性太低； 3. …...

编程日记 2025/7/14 15:14:06

在hadoop中实现序列化与反序列化

在 Hadoop 分布式计算环境中，序列化与反序列化是数据处理的核心机制之一。由于 Hadoop 需要在集群节点间高效传输数据并进行分布式计算，其序列化框架不仅要支持对象的序列化与反序列化，还要满足高效、紧凑、可扩展等特殊需求。本文将深入探讨…...

编程日记 2025/7/18 4:46:13

数据结构*排序

排序的一些相关概念稳定性假设在待排序序列中，存在两个元素A和B，A和B的值相同。在排序后，A和B的相对位置没有变化，就说这排序是稳定的。反之不稳定。内部排序与外部排序内部排序：数据完全存储在内存中&#xf…...

编程日记 2025/7/14 18:50:05

新浪《经济新闻》丨珈和科技联合蒲江政府打造“数字茶园+智能工厂+文旅综合体“创新模式

5月14日，新浪网《经济新闻》频道专题报道珈和科技在第十四届四川国际茶业博览会上的精彩亮相，并深度聚焦我司以数字技术赋能川茶产业高质量发展创新技术路径，及在成都市“茶业建圈强链”主题推介会上，珈和科技与蒲江县人民政府就智…...

编程日记 2025/7/14 23:00:38

【Linux】第二十三章控制启动过程

1. 请简要说明 RHEL9的启动过程。 （1）计算机通电。系统固件 (UEFI 或 BIOS) 开机自检 (POST)，并初始化部分硬件，然后，固件会寻找启动设备（如硬盘、USB、网络等），并将控制权交给引导…...

编程日记 2025/7/17 1:26:00

深信服golang面经

for range 中赋值的变量，这个变量指向的是真实的地址吗，还是临时变量不是真实地址，是临时变量 package mainimport "fmt"func main() {slice : []int{4, 2, 3}for _, v : range slice {fmt.Println(v, &v) // 这里的 v 是临…...

编程日记 2025/7/15 1:19:13

基于 Netty + SpringBoot + Vue 的高并发实时聊天系统设计与实现

编程日记 2025/7/14 14:03:04

根据当前日期计算并选取上一个月和上一个季度的日期范围，用于日期控件的快捷选取功能

代码如下： <el-date-picker v-model"value" type"monthrange" align"right" unlink-panels range-separator"至"start-placeholder"开始月份" end-placeholder"结束月份" :picker-options"pic…...

编程日记 2025/6/29 0:20:29

Spring Boot 使用 jasypt配置明文密码加密

引入依赖 <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>3.0.4</version> </dependency>添加配置 jasypt:encryptor:password: pssw0rd&Hubt2ec…...

编程日记 2025/7/15 21:41:00

ubuntu下docker安装mongodb-支持单副本集

1.mogodb支持事务的前提 1) MongoDB 版本：确保 MongoDB 版本大于或等于 4.0，因为事务支持是在 4.0 版本中引入的。 2) 副本集配置：MongoDB 必须以副本集（Replica Set）模式运行，即使是单节点副本集&#x…...

编程日记 2025/7/14 10:31:39

科技赋能，开启现代健康养生新潮流

在科技与生活深度融合的当下，健康养生也迎来了全新的打开方式。无需传统医学的介入，借助现代科学与智能设备，我们能以更高效、精准的方式守护健康。饮食管理步入精准化时代。利用手机上的营养计算 APP，录入每日饮食&#xff0…...

编程日记 2025/7/17 1:27:26

《安徽日报》聚焦珈和科技AI创新：智慧虫情测报护航夏粮提质丰产

5月7日，《安徽日报》焦点新闻版块以《高科技助力田管，确保夏粮丰收——为4300多万亩小麦守好防线》为题，深度报道了农业科技在夏粮生产中的关键作用。其中，珈和科技自主研发的AI虫情测报一体机作为绿色防控、农业智慧化的标杆被重…...

编程日记 2025/7/15 0:12:08

企业级 Go 多版本环境部署指南-Ubuntu CentOS Rocky全兼容实践20250520

🛠️ 企业级 Go 多版本环境部署指南-Ubuntu / CentOS / Rocky 全兼容实践兼顾多版本管理、安全合规、最小权限原则与 CI/CD 可复现性，本指南以 Go 官方 toolchain 为主，结合 asdf 实现跨语言统一管理，并剔除已过时的 GVM。支持 …...

编程日记 2025/6/29 0:52:33

MCP 协议传输机制大变身：抛弃 SSE，投入 Streamable HTTP 的怀抱

在技术的江湖里，变革的浪潮总是一波接着一波。最近，模型上下文协议（MCP）的传输机制就搞出了大动静，决定和传统的服务器发送事件（SSE）说拜拜，转身拥抱 Streamable HTTP，这…...

编程日记 2025/7/14 9:10:53

Windows 上配置 Docker，Docker 的基本原理和用途，以及如何在 Docker 中运行程序

Windows 系统上的 Docker 安装与使用指南 1. Windows 上配置 Docker 检查系统要求：使用 64 位 Windows 10/11，BIOS 已启用硬件虚拟化（VT-x/AMD-V）。Windows 版本最好更新到 2004 及以上（内部版本19041）&am…...

编程日记 2025/6/28 22:04:57

CBCharacteristic：是「特征」还是「数据通道」？

目录名词困惑：两种中文译法的由来官方定义 & 开发者视角乐高类比：文件夹与文件智能手表实例：Characteristic 长什么样？iOS 代码实战：读 / 写 / 订阅小结 & Best Practice 1. 名词困惑：为什么有两…...

编程日记 2025/7/14 23:18:57

【JavaEE】多线程

线程在Java中，鼓励多线程编程。进程可以满足并发编程，但是效率不高（创建、销毁、调度时间都比较长，这些都消耗在申请资源上了），而线程就不一样。线程也叫“轻量级进程”，创建、销毁、调度都更…...

编程日记 2025/6/28 22:05:00

docker- Harbor 配置 HTTPS 协议的私有镜像仓库

Harbor通过配置 HTTPS 协议，可以确保镜像传输的安全性，防止数据被窃取或篡改。本文将详细介绍如何基于 Harbor 配置 HTTPS 协议的私有镜像仓库。 1.生成自建ca证书 [rootdocker01 ~]# mkdir -p /liux/softwares/harbor/certs/custom/{ca,server,client…...

编程日记 2025/7/18 5:02:13

[SpringBoot]Spring MVC(5.0)----留言板

Spring留言板实现预期结果可以发布并显示点击提交后，显示并清除输入框并且再次刷新后，不会清除下面的缓存约定前后端交互接口 Ⅰ 发布留言 url : /message/publish . param(参数) : from,to,say . return : true / false . Ⅱ 查询留言 url : /messag…...

编程日记 2025/6/28 23:38:16

Jules 从私有预览阶段推向全球公测

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

编程日记 2025/7/16 5:55:17

vLLM框架高效原因分析

vLLM框架在模型推理中以高效出名，主要基于以下核心原理和技术优化，这些设计使其在处理大语言模型时显著提升性能： 一、PagedAttention：动态显存管理技术 vLLM的核心创新在于PagedAttention，灵感源自操作系统的虚拟内存…...

编程日记 2025/7/15 11:55:28

【Git】常用命令大全

以下是 Git 的常用命令大全，分为几个常见类别，便于理解和使用： 1. 初始化与克隆初始化本地仓库：git init克隆远程仓库到本地：git clone <repository_url> 2. 添加与提交添加指定文件到暂存区：git…...

编程日记 2025/7/15 9:04:46

pycharm无需科学上网工具下载插件的解决方案

以下是两种无需科学上网即可下载 PyCharm 插件的解决思路： 方法 1：设置 PyCharm 代理打开 PyCharm选择菜单：File → Settings → Appearance & Behavior → System Settings → HTTP Proxy在代理设置中进行如下配置： 代理地…...

编程日记 2025/7/15 1:31:51