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秒

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

相关推荐
然我3 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子8 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹12 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器18 分钟前
指定阿里镜像原理
前端
枷锁—sha23 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha24 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜40 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss