vue编译速度过慢?大型vue 项目使用dll插件优化编译速度,效果显著

为什么要优化编译速度

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

  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值