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

Logo

前往低代码交流专区

更多推荐