Vue + Webpack 学习随手笔记 - 让路由页延迟（按需）加载

2019年9月15日 198次阅读 来源: Z3ROG

《Vue + Webpack 学习随手笔记 - 让路由页延迟（按需）加载》

拿购物商城的Webapp作为例子举例。
下面的导航条很明显是一个带有路由功能的模块，通过配置路由，router的index.js可以如下配置：

import Vue from 'vue';
import Router from 'vue-router';

import Home from 'pages/home';
import Category from 'pages/category';
import Personal from 'pages/personal';
import Cart from 'pages/cart';

Vue.use(Router);

const routes = [
  {
    name: 'home',
    path: '/home',
    component: Home,   
  }, {
    name: 'category',
    path: '/category',
    component: Category
  }, {
    name: 'personal',
    path: '/personal',
    component: Personal
  }, {
    name: 'cart',
    path: '/cart',
    component: Cart
  }, {
    name: 'search',
    path: '/search',
    component: Search
  }
];

export default new Router({
  routes
});

但是这样配置有一个问题：在第一次页面加载时（不论加载是打开首页还是分类页），只有一页会显示出来，却加载了四页的资源。
——为了解决这个问题，延迟（按需）加载则很有必要了，即当用户点击导航条选项时，再触发该页面的加载。这时我们只需要作小小的改动，把路由component配置项的值改为一个函数。比如将开头的

import Home from 'pages/home';
import Category from 'pages/category';
import Personal from 'pages/personal';
import Cart from 'pages/cart';

删除后，改成一个函数声明，这样component就被当成一个函数去调用。

const Home = () => { import('pages/home') };
const Category = () => { import('pages/Category') };
const Personal = () => { import('pages/Personal') };
const Cart = () => { import('pages/Cart') };

又或者，直接在各个component处直接写一个箭头函数，这样还少占用几个变量。拿一个举例：

component: () => import('pages/home')

这样，就可以实现路由地址指向页面（这个案例中的页面只有一个组件）的按需加载了。

补充：以上对Webpack要求为 > v2,若你的Webpack版本较低，具体可以参考Vue官方异步组件的写法。上边的例子应该改写为：

component: (resolve) => {
  require(['pages/home'], resolve);
}

你可能还会用到组件动态渲染的知识，参考：https://cn.vuejs.org/v2/api/#…

    原文作者：Z3ROG
    原文地址: https://segmentfault.com/a/1190000016344081
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞