使用vue开发公众号遇到的加载缓慢问题的解决方案

发表时间：2020-10-19

发布人：葵宇科技

浏览次数：113

vue实现的微信公众号首次加载缓慢的解决方案

路由懒加载
CDN的方式引入组件
组件懒加载
异步加载子组件

整个项目一开始我是用npm的方式引入的外部的js组件，全程也就图片使用了懒加载，其他的都是硬操作，才导致了后面加载慢的问题。

而且这个公众号用了调用的讯飞语音接口识别的js，这也是一个大坑

路由懒加载

路由懒加载我也是查了很多的资料的，也有很多的方式去懒加载路由
这是我的懒加载的方式：

    {
      path: '/analyse',
      name: 'Analyse',
      meta:{title:'分析'},
      component: resolve => require(['@/views/tabber/find/analyse'],resolve),
    }, {
      path:'/userDetail',
      name:'UserDetail',
      meta:{title:'信息'},
      component: resolve => require(['@/views/tabber/mycenter/userDetail'],  resolve),
    }
    ...

这就是在你的路由文件里设置的。我设置完之后我也不知道效果体现在哪，但是原理就是在你访问路由的时候才会去加载对应的路由，如果不访问就不加载。

CDN的方式引入组件

CDN的方式引入组件的效果是非常明显的，因为我之前是npm的方式，需要在main.js中定义，所以运行加载的时候加载对应的app.js是非常的慢的，因为对应的组件有很多。
这里优化的方式就是利用webpack来减少打包vendor.js的体积
对于第三方插件使用cdn引入：
在index.html中引入

<!-- 引入Vue -->
  <!-- nutui -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.10/dist/nutui.css">
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.10/dist/nutui.js"></script>
<!-- bootstrap -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
     <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
    <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
    ...

然后再webpack.base.conf.js中配置对应的js

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    ...
  },

这里需要注意的是这个externals是在module.exports 中的，而且对应的冒号右边的是我们项目中使用的名字，左边是引入的js的名字
然后在引入的地方，比如main.js中引入的import Vue from 'vue’就可以删了，而且是必须删了，不然还是加载的npm的。

这里修改完之后就会发现打包的文件体积大大降低。这里当然不仅仅组件这样去写，在我这个项目中有用到讯飞的语言识别，这里用到一个CryptoJS的插件，一个js，而且这个js还很大，最后也是使用这种方式去引入，加快了我页面加载的速度，而且是非常的明显。

组件懒加载

因为是一个公众号，点击按钮后进入公众号是一个tabber的首页，这里也有很多可以优化的地方，比如tabber每一个菜单的加载都去使用懒加载，就是进入这个页面再去加载对应的文件

components: {
    'SelectTime':()=>import('@/views/tabber/find/SelectTime'),
    'checkPeoList':()=>import('@/views/checkPeople/list'),
    ...
  },

在子组件相对多的页面去使用这种方式可以大大的减少加载时间，减少空白页面的展示时间。

异步加载子组件

这里的异步加载也是很好的一种优化方式，首先我们在页面中可能会有一些子组件，这时我们可以将这些子组件异步加载，因为默认值同步的，这样加载完了才会继续往下去加载其他的。

 <div v-if="!isCompon">
 
 </div>
...
export default {
    created(){
        setTimeout(()=>{
          this.isCompon = true
        },0)
    }
    }