为什么要优化编译速度

vue项目过大，引用的组件过多，当启动项目打包项目或者修改代码的时候会发现编译速度太慢，浪费时间，甚至每改一行代码都可能需要编译三十秒以上，所以必须要优化，这样是在浪费生命

如何优化？

百度或者谷歌，发现webpack有个插件DllPlugin，也有vuecli的版本vue-cli-plugin-dll,所以决定使用这个插件

优化步骤

插件地址

vue add dll
//使用这个命令安装vue的dll插件

我在安装过程中报错，因为我用的是cnpm，后来删除nodemodules重新安装依然不行，最后我用yarn安装的依赖，然后成功了。如果在npm安装包的过程中莫名其妙会出错推荐使用yarn
yarn下载地址
我下载完删除了原来的nodemodules然后

yarn add vue-cli-plugin-dll
//使用这个命令安装vue的dll插件

接下来就是dll的相关配置，将我们项目中的依赖使用dll插件进行动态链接，这样依赖就不会进行编译，从而极大地提高编译速度，因为这些插件没有编译，在vue.config.js中进行配置，也很简单

module.exports = {
  pluginOptions: {
    dll: {
    //这里放的是你的依赖插件，就是你项目安装的其他的插件，将这些插件的名字依次加在后面,我建议将所有项目依赖插件全部放在后面
    //注意这里不能放webpack，gulp等需要node环境的插件，我尝试将babel等放到这里报错提示没有V8环境
      entry: ['vue', 'vue-router',"element-ui", "js-cookie"],
      //dll 编译后的链接库的地址
      cacheFilePath: path.resolve(__dirname, './public')
    }
  }
  }

配置好之后然后运行,进行你上面配置插件动态链接库的编译

//npm run dll 也可以
yarn run dll

dll编译完成后会在上面配置的目录下生成dll文件夹，就可以开始跑项目了，因为这些插件都不需要编译，跑起来很流畅，修改后的热更新速度更是显著提升。我以前修改一行代码热更新编译在30秒以上，使用这个以后基本十秒以内搞定。

//你自己的项目启动script
npm run serve

更多插件的配置请到插件的github查看