前端开发——解决vue首次访问太慢的问题

一、问题：vue也算是现在流行的前端框架，vue打包时（npm run build），会生成一个index.html静态页面和一个静态文件夹，文件夹中有css,js,img等等，其中让我们注意的就是JS，我们所有动态数据，都会由他来处理的。如果你在打包时，路由用的异步加载，那就可能会出现我现在这个问题。把所有JS打成一个包

从图上可以看出，每个js的大小超过1M，这会导致客户端首次访问时出现加载很久，才慢慢出现页面。这是我的一个公众号的前端，每次打包更新到nginx后，第一次访问（不管访问哪个路由）都是很慢，甚至有时候要十几秒，首次访问后再访问其他路由，都非常快。这是因为首次访问时，客户端会从服务器上重新下载大量的资源，资源越大，带宽越小，下载越慢。

二、解决

1、路由改成异步加载，使得每个JS分解开，访问哪个页面就加载哪个页面。

2、打包时，进行压缩打包

2.1、首先安装插件 compression-webpack-plugin 命令：cnpm install --save-dev compression-webpack-plugin

2.1、然后进入config目录下的index.js中，找到productionGzip: false,修改把他修改为true。如下图

这个时候我们可以打包一下，如果打包出现错误的话，那可能是版本不支持，这个时候，我们需要重新下载productionGzip版本，进行降级

命令：cnpm install --save-dev compression-webpack-plugin@1.1.12

下载完后，我们再打包一下：npm run build 打包成功，我们看一下结果如何。如下图，JS都被打包成.gz包，整个大小缩小很多。

3、内部引用转成外部链接

vue有一大特点就是可以像maven一样下载依赖包，vue在打包时，是直接把引用的本地依赖都一并打包到静态文件里，这使得原本就很大的资源，就得更加承重，这个时候，我们就可以考虑，部分依赖变成链接的引用。大家是否还记得多年前，还使用JS原生态时，怎么引用JQ的？同理。我们这些采用CDN节点方式进行引用。

3.1、修改根目录下的index.html

有人会问，这些链接我怎么知道，还有我本地版本是多少，我应该引用哪个版本的。大家可以进入main.js找到你要把依赖改成外部链接的包，然后跳到对应的依赖源码中，在文件路径上就会显示出对应的版本了。如我引用了mint-ui。路径上显示的是2.2.13版本,那他所对应的CDN节点就是https://cdn.bootcss.com/mint-ui/2.2.13/index.js ，同理，大家可以把链接复制到浏览器上，只要改后面的依赖名/版本号/引用JS名即可（引用JS名，可以进入依赖包里查看）。有些依赖是没有在CDM节点的，如果出现404，那就多试几次版本和名字，若试不出来，那就只能继续使用依赖。

把依赖转链接后，就需要把原来的main.js里的引用注释掉，否则还是会打包进去，

3.2、项目根目录下build/webpack.base.config.js中添加externals。这里做一个映射作用，

修改完后，我们进行打包，然后部署上去，看看样式和依赖有没有丢失，如果有丢失，再回来调试。若找不出原因，可以直接还原回依赖的方法。压缩就已经解决很大的问题了。

4、提高网络带宽

网络带宽是一个优化瓶颈，如果带宽就只有1M，你再怎么优化，也是有限的。不如提升一下，比如使用阿里云的朋友，可以临时提升一下带宽，试一下效果如此。若有提升，那建议提升带宽