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控制其只在需要的时候被渲染。

  • 相关阅读:
    【PA2014】【BZOJ3709】Bohater(贪心,排序)
    【POJ1328】Radar Installation(贪心,决策包容)
    【NOIP2002】【Luogu1032】字串变换
    【NOIP2010】【Luogu1199】三国游戏
    【NOIP2009】【Luogu1068】分数线划定
    【NOIP2002】【Luogu1036】选数
    【NOIP2004】【Luogu1085】不高兴的津津
    【NOIP2003】【luogu1042】乒乓球
    【NOIP2012】【Luogu1080】国王游戏(贪心,邻项交换)
    Jzoj4894 SJR的直线
  • 原文地址:https://www.cnblogs.com/fsg6/p/14470002.html
Copyright © 2011-2022 走看看