vue项目首屏开启速度慢的解决方案

最近接手了一个后台管理系统。技术栈主要是vue家族的bucket elementui。当老板打开测试环境页面时，他说需要6秒钟才能看到主页。如何优化？

首先，我们需要安装网络包包分析器

//web pack . prod . conf . jsif(config . build . bundlealyzer report){ const bundlealyzer plugin=require(' web pack-bundle-analyzer ')。bundlealyzer plugin webpackconfig . plugins . push(新的bundlealyzer plugin())}//config/index . jsbuild : {//使用额外的参数运行构建命令，以//在构建完成后查看包分析器报告： //`npm运行构建-报告`//设置为` True '或` false '以始终打开或关闭包分析器报告： process . env . npm _ config _ report }运行NPM运行构建-报告

我们可以看到厂商中的elementui占据了50万，那么如何优化呢？

添加到webpack配置文件中，然后就有了见证奇迹的时刻。

Externals: {'vue' :' vue '，' element-ui' :' element '，' axios' :' axios'}，然后看看我们的供应商量

供应商总共只有195k

在哪里可以找到丢失的elementui文件？答案是cdn参考。

在之前的项目中有提到矩，但是这个库太大了。我在github上找到了一个和momentapi完全一样的库，但是文件大小只有2kb。

其他优化方法包括ssr，最好由nuxtjs完成。自己配置ssr太麻烦了。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。