zoukankan      html  css  js  c++  java
  • vue中异步组件实现按需加载

    在项目的目录中找到router文件夹里的index.js
    
    index.js文件原先的文件结构
    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/pages/home/Home'
    import City from '@/pages/city/City'
    import Detail from '@/pages/detail/Detail'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [{
        path: '/',
        name: 'Home',
        component: Home
      }, {
        path: '/city',
        name: 'City',
        component: City
      }, {
        path: '/detail/:id',
        name: 'Detail',
        component: Detail
      }],
      scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }
    })
    
    
    修改后的index.js文件结构
    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [{
        path: '/',
        name: 'Home',
        component: () => import('@/pages/home/Home')
      }, {
        path: '/city',
        name: 'City',
        component: () => import('@/pages/city/City')
      }, {
        path: '/detail/:id',
        name: 'Detail',
        component: () => import('@/pages/detail/Detail')
      }],
      scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }
    })
    
    
    
    注意:当app.js文件很小或者不超过1MB的时候我们没必要把app.js拆分进行异步加载,这样就不会造成多余的http请求了,否则的话就会降低页面的性能


    页面中的异步加载组件 我们不单单可以在路由中使用异步加载组件,在一个页面中也可以使用 如页面中异步加载Header.vue组件 原先的写法
    <script> import HomeHeader from './components/Header' export default { components: { HomeHeader } } </script> 异步加载的写法 <script> export default { components: { HomeHeader: () => import('./components/Header') } } </script>

    页面组件按需加载总结

    1,使用vue异步组件,可以将复杂页面的框架代码和子组件代码拆开,优先加载框架代码,显著提高页面加载速度;
    2,组织复杂页面的代码时,可以考虑对于打开首屏时不需要渲染的子组件,使用v-if控制其只在需要的时候被渲染。

  • 相关阅读:
    Spark面对OOM问题的解决方法及优化总结 (转载)
    spark rdd 宽窄依赖理解
    hive orc update
    hive sql 语句执行顺序及执行计划
    java 正则 贪婪匹配 匹配sql语句中的引号内容
    java 权重随机算法实现
    MySQL创建用户和加限权
    MySQL完整性约束
    MySQL基础操作与数据类型
    MySQL数据库初识
  • 原文地址:https://www.cnblogs.com/fsg6/p/14470002.html
Copyright © 2011-2022 走看看