记一次公众号程序启动慢的原因（微信加载公众号为什么那么慢）

公司最近申请了自己的公众号，我负债公众号的某一个程序实现。在开发环境下实现好后，npm run build，编译，将编译后的dist文件夹放到微信公众号接口的服务器的nginx上。

测试时发现第一次从公众号进入程序时特别慢，要将近20s，这肯定是用户无法忍受的。于是今天花了半天时间找原因。

首先我怀疑是请求耗时长，于是在main.js文件中的，拦截器上做一个标记，并记录时间:

Vue.http.interceptors.push((request, next) => {

let loadingInstance = Loading.service({text:'拼命加载中...',background:'white'});

const user_id = window.USER_ID;

if(''!==user_id && undefined!==user_id ) request.headers.set('Authorization', user_id);

next((response) =>{

loadingInstance.close();

alert(t1)

return response

})

});

发现这里耗时不到1s。

接着想是不是页面渲染慢，于是在main.js,index.html，HelloWorld.vue文件中beforecreate,created,updated钩子函数都设置时间，待页面渲染后打印。发现也不是这里的问题，因为打印的时间最长也不过1s。

最后没法子，只好拷贝公众号打开程序时url,通过qq发送到电脑端，使用chrome的开发者模式打开，终于发现有一个文件资源引入费时

经查找，这个是第三方依赖库的一个合集，webpack 中通常用vendor来命名我们项目中使用的第三方库，就是说第三方库引入太多，导致这个文件过大，引入慢。回想起来，发现主要是引用了elementUI，于是沿着这思路，自己用html css 实现使用elementUI是控件，编译，发布，经测试，速度问题解决。