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秒

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

相关推荐
国家不保护废物几秒前
闭包实战大全:从防抖节流到私有变量,解锁JS高级技巧 🚀
前端·javascript·面试
故及几秒前
CSS 溢出传播机制
前端
求知摆渡5 分钟前
从零开始搭建typecho
前端·后端
极客悟道5 分钟前
彻底搞懂Java值传递:90%开发者都会踩的坑
前端·后端
Mintopia15 分钟前
计算机图形学中的毛发与布料模拟:让虚拟世界动起来的魔法
前端·javascript·计算机图形学
小飞悟18 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia19 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀22 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价22 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae