当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面

才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目内容变多了后,这个文件肯定会越来越大,而且变更也会很频繁。

官方的解决方案https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

以前的引用方式可能是这样的

import Hello from '../pages/Hello'
import Index from '../pages/Index'

按照上面的方案直接更改一下引用方式就可以了

const Hello = r => require.ensure([], () => r(require('../pages/Hello')), 'group-b')
const Index = r => require.ensure([], () => r(require('../pages/Index')), 'group-a')

把属于同一个功能分类的组件或者某个路由下的组件打包放在同一个chunk中,只需要给chunk命名,提供require.ensure第三个参数作为chunk的名称

Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure的依赖(传空数组就行)

打包结果如下:

其实这是webpack代码分割的一个方法,有关require.ensure()的更多用法请参考:http://www.css88.com/doc/webpack2/guides/code-splitting-require/

-------------------

为什么要这么干呢

如果按照import直接引用vue的组件,刚开始可能项目页面不多可能察觉不到这样做的用处,当项目中路由有几十个或者更多的组件需要引用,webpack默认将所有的js打包为一个文件:

app.[contenthash].js

然后这个文件会越来越庞大,这个文件即使你在访问首页默认页等时候需要被加载,然而这个文件不进行分割的话,可能有好几兆甚至几十兆

大多数的项目首页可能没啥交互特别复杂的功能,却要强制加载首页并不会用的其他页的资源,而且首页也是访问量最大的,为了节省资源,为了加快首页访问速度,也需要按需加载才行啊

所以webpack就有了require.ensure代码分割。

另外需要注意的是,require.ensure 内部依赖于 Promises。 如果你在旧的浏览器中使用 require.ensure 请记得shim Promise es6-promise polyfill

今天再看vue-router的懒加载文档时候,才发现下面还有一段

把组件按组分块

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

通过注释语法来提供chunk name,但是webpack的版本要高于2.4的版本。

vue.js 二 路由懒加载的更多相关文章

  1. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

    一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...

  2. vue-router路由懒加载(解决vue项目首次加载慢)

    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...

  3. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  4. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  5. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  6. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  7. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  8. vue(18)路由懒加载

    什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更 ...

  9. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

随机推荐

  1. (转)SELinux是什么意思,如何关闭?Linux下的防火墙用什么命令打开?

    SELinux是什么意思,如何关闭?Linux下的防火墙用什么命令打开? 原文:http://blog.csdn.net/hhcccchh/article/details/12995539 SELin ...

  2. 数据库用户被锁怎么办,报the passord logon

    –1.使用管理员用户登陆,查看用户状态: select username,account_status from dba_users; –2.修改用户状态: alter user base accou ...

  3. oop典型应用:实体类

    1. 要知道这个图三者的关系 2.实体类属性类型与数据库类型 3.readonly与const的对比 两者的区别如下: ①const能修饰类中的字段(field)或者局部变量(local variab ...

  4. springboot集成freemarker 配置application.properties详解

    #配置freemarker详解 #spring.freemarker.allow-request-override=false # Set whether HttpServletRequest att ...

  5. Android入门:封装一个HTTP请求的辅助类

    前面的文章中,我们曾经实现了一个HTTP的GET 和 POST 请求: 此处我封装了一个HTTP的get和post的辅助类,能够更好的使用: 类名:HttpRequestUtil 提供了如下功能: ( ...

  6. JavaSE_5_线程

    1.多线程中的i++线程安全吗?为什么? 不安全,因为每个线程都有自己的工作内存,每个线程需要对共享变量操作时必须把共享变量从主内存中加载到自己的工作内存,等完成操作后再保存到内存中,如果一个线程运算 ...

  7. python协程与异步协程

    在前面几个博客中我们一一对应解决了消费者消费的速度跟不上生产者,浪费我们大量的时间去等待的问题,在这里,针对业务逻辑比较耗时间的问题,我们还有除了多进程之外更优的解决方式,那就是协程和异步协程.在引入 ...

  8. WPF动画的几种模式

    最近在用WPF做简单动画,以下是几点经验总结: 1. 使用DispatcherTimer做动画 VB6的年代大家就用Timer做动画了,不用多解释,这个DispatcherTimer和本身的Timer ...

  9. 从零开始的全栈工程师——js篇2.2

    条件语句 补充: var a=“hello world” a这个变量是字符串了 对于里面每一个字母来说 他是字节 里面有11个字节 字节总数用length表示 如下: 根据上面的内容咱们又发现了一个运 ...

  10. oracle中查找与已知表的数据库对象

    在此次情况中,业务顾问就给我提供了一张客户公司客户化的Form,然后让找出界面上的数据是怎样生成的. 首先我们从EBS form 界面上找到了界面的数据来源于一张表ks_so_line_margin_ ...