vue项目编译、运行过慢如何提升编译(编译包括运行编译与打包编译)速度

要说优化提升编译速度之前，我先给大家说一个能够列出输出、loader和plugins的耗时的插件,耗时过长将会使用黄色和红色显示。
speed-measure-webpack-plugin
这个插件我们在具体的项目中如何配置呢？下面请来看看我的配置，这个插件webpack4以上才出。
首先我们来安装：

cnpm install hard-source-webpack-plugin --save

//然后我们在vue.config.js中配置
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");//我们首先引入设置变量名称
chainWebpack: (config) => {
		config.resolve.symlinks(true); // 修复热更新失效
		config.resolve.alias.set("@", resolve("src"));
		config.performance.set("hints", false);

		config.plugin("xcTime").use(SpeedMeasurePlugin);  //然后我们配置到chainwebpack中
		config.output.filename("[name].[hash].js").end();
		if (IS_PROD) {
			config.optimization.delete("splitChunks");
		}
		return config;
	}

这么一看我们的耗时太长了吧50多秒也太慢了。接下来我们要对他进行优化了。
首先我们回顾下webpack2/3使用的是dll缓存方案。
dll缓存方案
DLL 文件为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据 //只适用于webpack2/3，werbpack4没有效果。
之前我们为什么要用 DLL？

原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。由于动态链接库中大多数包含的是常用的第三方模块，例如 Vue react、react-dom，只要不升级这些模块的版本，动态链接库就不用重新编译
步骤如下：
抽离：把网页依赖的基础模块抽离出来，打包到一个个单独的动态链接库中去。一个动态链接库中可以包含多个模块；

获取：当需要导入的模块存在于某个动态链接库中时，这个模块不能被再次被打包，而是去动态链接库中获取；

加载：页面依赖的所有动态链接库需要被加载。

之前使用 DllPlugin 和 DllReferencePlugin 完成，但是其配置非常复杂，而且假如更新了文件，还需要手动重新生成 dll。这里选择了 AutoDllPlugin[2]，它会自动完成以上两个插件的功能。

autodll-webpack-plugin   //webpack2/3中的插件

但是我在webpack4中尝试了下没用，你们不信也可以试试。webpack我们可以用下面这个插件：hard-source-webpack-plugin。

hard-source-webpack-plugin
首先我们说明下这个东西，是通过在磁盘中设置缓存来提升编译加载速度的。之前没有配置的时候我们可以看到速度为50s
我们先进行配置下：

cnpm install hard-source-webpack-plugin --save

//然后我们在vue.config.js中设置：
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
chainWebpack: (config) => {
		config.resolve.symlinks(true); // 修复热更新失效
		config.resolve.alias.set("@", resolve("src"));
		config.performance.set("hints", false);
		config.plugin("xcCache").use(HardSourceWebpackPlugin); //提升编译速度  不能跟speed-measure-webpack-plugin同时使用
		//config.plugin("xcTime").use(SpeedMeasurePlugin);  //然后我们配置到chainwebpack中
		config.output.filename("[name].[hash].js").end();
		if (IS_PROD) {
			config.optimization.delete("splitChunks");
		}
		return config;
	}

//安装好后我已经迫不及待的启用了一看启动后还是50s，不用慌第一次，然后我们第二次启动

9591ms,比之前提升了整整41m；太给力了吧。
然后我们看看打包速度原先的打包速度

安装缓存插件后的速度

我们可以看提升了将近60s

接下来我试着热更新看看效果咋样


这两个都是修改同一个文件的对比速度大大提升。
最后再次强调一点
再次强调：
HardSourceWebpackPlugin 和 speed-measure-webpack-plugin 不能一起使用

下一节课我们着重说下提升打包速度