vue项目本地开发构建速度优化 hard-source-webpack-plugin

1、为啥要优化本地构建速度

有些项目因为项目需求点多、功能复杂、管理混乱、引入第三方插件/样式库过多、本身项目页面较多、文件较多等等原因,会导致项目体积变大、本地构建速度明显变慢,这时就需要对项目webpack进行一些设置来提高打包效率、加快打包时间。

2、怎么做打包优化

webpack打包速度优化有多种解决方案,今天说一种通用并且使用成本低、入手极为方便的插件

hard-source-webpack-plugin

(1) 首先下载插件
javascript 复制代码
npm install hard-source-webpack-plugin -d
(2) 使用也很简单
javascript 复制代码
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

plugins:[
	...,
	new HardSourceWebpackPlugin(),
]
(3) 作用

hard-source-webpack-plugin会进行文件的启动缓存,第一次启动之后,会给文件添加一次缓存,然后在第二次启动的时候,直接在本地缓存进行。打开的时候先去本地获取项目,优化非常猛项目启动时间80%。

文件的打包,使用之后,加速打包大约在40%-50%左右

缺点:每次修改配置项之后,需要项目重新启动的时候,这个时候是需要重新进行项目的热更新,跟没有配置一样。

3、附上我在做的项目打包时间对比

优化前第一次本地启动速度 优化前第二次本地启动速度 优化后第一次本地启动速度 优化后第二次本地启动速度
193秒 193秒 219秒 29秒

可以看出优化后第二次的打包构建速度有了明显的提升。

相关推荐
我要让全世界知道我很低调4 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined26 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck28 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
蓝倾41 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7781 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js