vue面试题：vue路由按需加载（路由懒加载）

矫情吗；* 2023-02-18 08:27 18阅读 0赞

# vue的SPA（Single Page Application）应用里，当（webpack）打包构建时，会把所有的js打在一起，JavaScript 包会变得非常大，并在第一次请求时全部下载完毕，影响页面加载（性能）。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 #

目前有三种方式实现路由组件的懒加载，分别是：

*  vue异步组件
 *  es 的 import()
 *  webpack的require.ensure()

## 一、 vue异步组件 ##

把路由配置，进行修改

{
    
        path: '/shopcar',
    
        name: 'shopcar',
    
        component: resolve => require(['@/pages/ShopCar'],resolve)
    
    },

1）、运行是打开chrome的network，就会看到进入路由 /shopcar 时，会多出另外 一个js文件。一般是0.js或者1.js

2）、用npm run build打包时，wepback就会多打了一个 js文件（如：0.b5a82d6947b2e30edcc8.js），这个js文件就是把ShopCar文件进行了单独打包。同样的在network里，就会看到进入路由 /shopcar 时，多出一个单独的js文件的请求

注：这种方式，webpack会把每个异步组件单独打成一个js文件。

## 二、es的import() ##

主要是把原来的引入方式进行修改 ，路由配置就不用改了：

1、不指定webpackChunkName，每个组件单独打一个js文件

原来是：import ShopCar from '@/pages/ShopCar'

修改后：const ShopCar = () => import('@/pages/ShopCar');

修改后的做法是定义了一个函数，由于函数不调用不执行，所有，一开始时，并不会引入该组件，只有路由跳转时才会调用该函数。

2、指定webpackChunkName，相同的webpackChunkName就会打在同一个js文件里

1）、以下两个组件的webpackChunkName相同，所以，打在一个js文件里

const ShopCar = () => import(/* webpackChunkName: 'demot' */ '@/pages/ShopCar');
    
    const GoodsDetailPage = () => import(/* webpackChunkName: 'demot' */ '@/pages/GoodsDetailPage');

2）、下面这个组件的webpackChunkName和上面两个不一样，所以，单独打在一个js文件里

const Login = () => import(/* webpackChunkName: 'demoty' */ '@/pages/Login');

## 三、webpack的require.ensure() ##

这种方式，只改路由配置即可。

如：

{
    
        path: '/GoodsDetailPage',
    
        name: 'GoodsDetailPage',
    
        component: r => require.ensure([], () => r(require('@/pages/GoodsDetailPage')), 'demot')
    
    },
    
    {
    
        path: '/Login',
    
        name: 'Login',
    
        component: r => require.ensure([], () => r(require('@/pages/Login')), 'demot')
    
    },
    
    {
    
        path: '/shopcar',
    
        name: 'shopcar',
        
        component: r => require.ensure([], () => r(require('@/pages/ShopCar')), 'demoty')
    
    },

以上代码中，我把Login和GoodsDetailPage使用了相同的chunkName