vue中路由按需加载的几种方式
程序员文章站
2022-07-05 14:56:14
使用vue cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: 普通加载的缺点: webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢 1、require.ensure()实现按需加载 + 语法: + vu ......
使用vue-cli构建项目后,我们会在router文件夹下面的index.js里面引入相关的路由组件,如:
import hello from '@/components/hello' import boy from '@/components/boy' import girl from '@/components/girl'
普通加载的缺点:
webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢
1、require.ensure()实现按需加载
- 语法:
require.ensuire(dependencies:string[],callback:function(require),errorcallback:function(error),chunkname:string)
- vue中使用:
const list = resolve =>{ require.ensuire([],()=>{ resolve(require('./list')) },'list') }
ps:会报错,不知道如何解决,知道的朋友还请告知一下,报错内容如下:
2、vue异步组件技术
在router中配置,使用这种方法可以实现按需加载,一个组件生成一个js文件
- vue中使用:
{ path: '/home', name: 'home', component:resove => require(['@/components/home'],resolve) }
3、使用动态的import()语法(推荐使用这种)
- 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)
下一篇: react 源码之setState
推荐阅读
-
基于vue中css预加载使用sass的配置方式详解
-
Vue加载组件、动态加载组件的几种方式
-
vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
-
详解Vue.js中引入图片路径的几种方式
-
vue实现路由懒加载及组件懒加载的方式
-
vue项目实现按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
-
vue项目实现按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()...
-
Vue 中可以定义组件模版的几种方式
-
vue中路由按需加载的几种方式
-
Unity中几种资源的加载卸载方式