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

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

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

2、怎么做打包优化

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

（1） 首先下载插件

cnpm install hard-source-webpack-plugin -D
1

（2） 使用也很简单

const vueLoaderConfig = require('./vue-loader.conf')


plugins:[
	...,
	new HardSourceWebpackPlugin(),
]
1
2
3
4
5
6
7

（3） 作用

此插件在第一次打包的时候会将打包的文件进行缓存，当第二次进行打包时会对比如果文件没有发生变化会使用缓存的文件进行构建，从而加快本地的构建速度，实测 第二次构建时的打包速度将降低 到原来的15%左右，不同的项目提升的速度不一样。但都有明显的提升。

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

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

4、总结

一个简单的配置和插件使用，可以带来效率的提升，前端要多了解多尝试。

各位路过的大佬如果知其它优化方案可以加快构建速度，欢迎交流指教。