为什么要优化编译速度

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查看

Logo

前往低代码交流专区

更多推荐