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

结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二,在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点 (split point):

import('./Foo.vue') // 返回 Promise

注意:如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue')

实际开发中发现使用如下方式也可以

const Foo = (resolve) => {
import('components/Foo.vue').then((module) => {
resolve(module)
})
}

在路由配置中什么都不需要改变,只需要像往常一样使用 Foo
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})

vue2.x 路由懒加载 优化打包体积的更多相关文章

  1. vue2实现路由懒加载

    一.什么是懒加载 顾名思义,懒加载就是随用随加载,什么时候需要就什么时候加载. 二.为什么需要懒加载 在单页应用中,如果没有使用懒加载,webpack打包后的文件会很大,这时进入首页时的加载时间会很长 ...

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

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

  3. vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  4. vue3 + vite实现异步组件和路由懒加载

    在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...

  5. vue-cli 项目实现路由懒加载

    在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...

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

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

  7. vue的路由懒加载

    路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...

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

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

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

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

随机推荐

  1. python之函数用法startswith()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法startswith() #http://www.runoob.com/python/ ...

  2. CString与UTF8互转代码

    这个代码网上很多,留在这里做个备份. static std::string ConvertCStringToUTF8( CString strValue ) { std::wstring wbuffe ...

  3. startActivityForResult的使用和用法

    startActivityForResult的使用和用法 startActivityForResult 和 onActivityResult在activity间传递数据 AndroidManifest ...

  4. Dubbo创建提供者&消费者工程

    1. 前言 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spring的Schema扩展进行加载.如果不想使 ...

  5. Linux-LVS为何不能完全替代DNS轮询

    转自:链接 上一篇文章“一分钟了解负载均衡的一切”引起了不少同学的关注,评论中大家争论的比较多的一个技术点是接入层负载均衡技术,部分同学持这样的观点: 1)nginx前端加入lvs和keepalive ...

  6. ubuntu 终端中文显示乱码问题!

    1 Alt+Ctrl+F1 进入第一个终端,发现中文乱码. 2 安装zhcon. sudo apt-get install zhcon 3 输入下面命令,启动zhcon,中文显示正常. zhcon - ...

  7. Delphi消息推送

    移动端的消息推送大家都体验过,智能手机上一大堆广告等各种消息会不时从消息栏中弹出来骚扰你. PC程序中我们有时也会用到消息推送,比如通知之类.通常我们使用的方法可能更多地使用Socket之类来处理,有 ...

  8. linux shell 脚本攻略学习9--rename命令详解

    rename命令详解: 对文件重命名是常用的操作之一,一般对单个文件的重命名用mv命令,如: amosli@amosli-pc:~/learn/example$ ls abc.txt amosli@a ...

  9. I/O Completion Ports学习

    表示还是自己看MSDN最直接,别人的介绍都是嚼剩下,有木有? IO完成端口为在多处理器系统处理多个异步IO请求提供一个高效的线程模型.当一个进程新建一个完成端口,操作系统新建一个目的为服务这些请求的队 ...

  10. 进阶之路(基础篇) - 003 I/O的模拟的读取

    /********************************* 代码功能:读取某引脚的模拟量串口返回数据 使用函数: analogRead(引脚号); //调用10位AD 创作时间:2016*1 ...