善用js 异步引入，大幅提升vue站点加载速度，媲美大厂流畅性

Posted 2021-03-02 绿树下仰望星空

相信很多同学都会遇见这样一个问题，vue，开发的网页一直转圈，Vue不好吗，不是，一个小知识点让你的Vue网页如丝滑般流畅。

我在学vue的第一节课，也就是入门课时，就被老师教导分模块，分组件，接下来看下模块与组件如何优化吧

 

首先从全局来看，多个网页的路由文件使用路由懒加载，这样：

{
      path: ‘index‘,
      name: ‘index‘,
      meta: {
        title: ‘首页信息‘,
      },
      component: () => import(‘@/views/home‘),   //()=> 后面不加大括号，Es6直接返回后面的内容,这就是路由懒加载
    }

　　从构成一个网站的页面中的单个页面来看，可以这样

const home=()=>import(‘@/components/home‘);  //vue组件懒加载，不要小看哦，加载时采用这种方式引入，可以大幅提升页面加载速度哦

export default{
　　components:{
　　home
}
}

　各位同学要善用组件，善于拆分并异步引入，相信你们的网站也会超级流畅