Vue Lazy Loading Routes
2017-03-18 19:12
274 查看
When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route’s components into a separate chunk, and only load them when the route is visited.
Combining Vue’s async component feature and Webpack’s code splitting feature, it’s trivially easy to lazy-load route components.
All we need to do is define our route components as async components:
There’s also an alternative code-split syntax using AMD style require, so this can be simplified to:
Grouping Components in the Same Chunk
Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use named chunks by providing a chunk name to require.ensure as the 3rd argument:
the effect: if you render the component that you visited , this will have more .js files,but not included in vue app.js
as the photo show , there will have 2.js and 3.js , if not lazy load only have app.js
if you grouping your component in same chunk will the group chunk will have same .js file
Combining Vue’s async component feature and Webpack’s code splitting feature, it’s trivially easy to lazy-load route components.
All we need to do is define our route components as async components:
const Foo = resolve => { // require.ensure is Webpack's special syntax for a code-split point. require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) }) }
There’s also an alternative code-split syntax using AMD style require, so this can be simplified to:
const Foo = resolve => require(['./Foo.vue'], resolve)
Grouping Components in the Same Chunk
Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use named chunks by providing a chunk name to require.ensure as the 3rd argument:
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
the effect: if you render the component that you visited , this will have more .js files,but not included in vue app.js
as the photo show , there will have 2.js and 3.js , if not lazy load only have app.js
if you grouping your component in same chunk will the group chunk will have same .js file
相关文章推荐
- 为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
- [Vuejs] 关于vue-router里面的subRoutes
- 万不得已不要使用ORM延迟加载(Lazy Loading)
- vue addRoutes实现动态权限路由菜单的示例
- It will cause a new session when you use lazy loading collection, and the collection will assicated with the new session and the
- (五)vue开发 - 使用 vue-layer-mobile组件实现toast,loading效果
- JavaScript – Lazy Loading Using RequireJS
- Bidirectional OneToOne association lazy loading support
- Lazy Loading In AngularJS
- vue-lazy-render: 延迟渲染大组件,增强页面切换流畅度
- 结合Vuex创造一个完美的vue-loading/vue-toast组件
- Lazy Loading CSS and JS files
- Understanding Lazy Loading Strategies for NHibernate(zhuan)
- Enable lazyloading in javascript while using extjs
- Lazy loading of images in Listview
- Hibernate深入浅出(八)持久层操作——延迟加载(Lazy Loading) 推荐
- MyBatis Lazy Loading
- Vue2.0 http请求以及loading展示实例
- [AngularJS] Lazy loading Angular modules with ocLazyLoad
- vue用addRoutes实现动态路由的示例