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

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

2、怎么做打包优化

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

（1） 首先下载插件

npm install hard-source-webpack-plugin -d

（2） 使用也很简单

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')plugins:[...,new HardSourceWebpackPlugin(),
]

（3） 作用

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

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

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

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

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

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