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

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秒

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

---

去除无用的文件：useless-files-webpack-plugin  

1、npm i useless-files-webpack-plugin -s

 2、vue.config.js中配置

const UselessFile = require('useless-files-webpack-plugin')

chainWebpack: config => {
    config.plugin('uselessFile')
        .use(
          new UselessFile({
            root: path.resolve(__dirname, './src'), // 项目目录
            out: './unused-files.json', // 输出文件列表
            clean: false, // 是否删除文件,
            exclude: /node_modules/ // 排除文件列表
          })
        )

3、可以看到 unused-files.json  这个文件，每次编译都会没有用到的文件在中间，可以具体看一看，不需要的可以删掉