vue 之路由懒加载

vue打包后的js文件越来越大，这会是影响加载时间的重要因数。当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。下面是几种常见vue路由懒加载的方法。

方法一 resolve

这一种方法比较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }{path: '/',name: 'HelloWorld',component: resolve => require(['@/components/HelloWorld'], resolve)}]
})

方法二官网方法

vue-router在官网提供了一种方法，可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身，而我们又可以使用import来导入组件。整合起来代码示例如下：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }{path: '/',name: 'HelloWorld',component: () => import('@/components/HelloWorld.vue')}]
})

官网中还提供了通过注释语法来提供chunk name的方法，但是webpack的版本要高于2.4的版本。感兴趣的可以到官网了解一下。

方法三 require.ensure

这种模式可以通过参数中的webpackChunkName将js分开打包。

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }{path: '/',name: 'HelloWorld',component: resolve => require.ensure([], () => resolve(require('@/components/'+componentName)), 'webpackChunkName')}]
})

vue 之路由懒加载相关推荐

vue实现路由懒加载，react实现路由懒加载
组件懒加载也叫按需加载: 当打包构建应用时,js 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 打包 bui ...
vue中路由懒加载浅析
http://www.cnblogs.com/zhanyishu/p/6587571.html 懒加载主要分为两步: 1.webpack配置使它支持懒加载. 2.router层面异步的方式加载组件. ...
Vue Router系列之路由懒加载
文章の目录一.具体需要 3 步: 1.安装 `@babel/plugin-syntax-dynamic-import` 包. 2.在 babel.config.js 配置文件中声明该插件. 3.将路 ...
Vue-Router + Webpack 路由懒加载实现
一.前言 https://segmentfault.com/a/1190000015904599 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
Vue 路由懒加载
路由和组件的常用两种懒加载方式: 1.vue异步组件实现路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) 2.es提出的import(推荐使用这 ...

vue 之路由懒加载

方法一 resolve

方法二官网方法

方法三 require.ensure

vue 之路由懒加载相关推荐

最新文章

热门文章

vue 之 路由懒加载

方法一 resolve

方法二 官网方法

方法三 require.ensure

vue 之 路由懒加载相关推荐

最新文章

热门文章

vue 之路由懒加载

方法二官网方法

vue 之路由懒加载相关推荐