vue中路由按需加载的几种方式

使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：

import Hello from '@/components/Hello'
import Boy from '@/components/Boy'
import Girl from '@/components/Girl'

webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢

• 语法：

require.ensuire(dependencies:String[],callback:function(require),errorCallback:function(error),chunkName:String)

• vue中使用：

const List = resolve =>{ require.ensuire([],()=>{ resolve(require('./list')) },'list') }

ps：会报错，不知道如何解决，知道的朋友还请告知一下，报错内容如下：

在router中配置，使用这种方法可以实现按需加载，一个组件生成一个js文件

• vue中使用：

{
path: '/home',name: 'home',component:resove => require(['@/components/home'],resolve)
}

• vue中使用：

//没有指定webpackChunkName,每个组件打包成一个js文件
const test1 = ()=>import('@/components/test1.vue') 
const test2 = ()=>import('@/components/test2.vue')
//指定了相同的webpackChunkName，会合并打包成y一个js文件

const test3 = ()=>import(/ webpackChunkName:'grounpTest' / '@/components/test3.vue')

const test4 = ()=>import(/ webpackChunkName:'grounpTest' / '@/components/test4.vue')
const router = new VueRouter({

routes: [

{ path: '/test1',component: test1 },{ path: '/test2',component: test2 },{ path: '/test3',component: test3 },{ path: '/test4',component: test4 }

]

})

注：

• /* webpackChunkName: 'grounpTest' */使用命名chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!