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

Mr_linjw2023-11-19 10:12

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秒

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