vue 路由按需加载

在vue项目中，一般引入组件都是用import

import 组件名 from '组件路径'

webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载

1. require.ensure()

webpack提供的require.ensure(),这样可以实现按需加载，并且你可以将多个相同类的组件打包成一个文件，只要给他们指定相同的chunkName即可，如示例中的demo将会打包成一个文件

{path: '/promisedemo',name: 'PromiseDemo',component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
},
{path: '/hello',name: 'Hello',// component: Hellocomponent: r => require.ensure([], () => r(require('../components/Hello')), 'demo')
}

2. Vue的异步组件技术，这种方法可以实现按需加载，并且一个组件会打包成一个js文件

 {path: '/promisedemo',name: 'PromiseDemo',component: resolve => require(['../components/PromiseDemo'], resolve)
}

3. import（）

使用import关键字引入,这个import(‘XXX’)函数会返回一个Promise对象;参考资料vue-router路由懒加载

{path: '/',name: 'index',component:() => import('@/views/index/index')}

vue 路由按需加载相关推荐

vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
vue router按需加载
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 Vue.use(Router); 5 //按需加载,当渲染其他页面时才加载其 ...
react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue ...
vue-router 路由的懒加载原理及方式
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组 ...
ant design pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon
一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue'// base library impo ...
Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案文章目录 JeecgBoot实战 - 按需加载方案一.Ant-Design-Vue 按需加载二.Icon按需加载一.Ant-Design-Vue 按需加 ...

vue 路由按需加载

1. require.ensure()

2. Vue的异步组件技术，这种方法可以实现按需加载，并且一个组件会打包成一个js文件

3. import（）

vue 路由按需加载相关推荐

最新文章

热门文章