当打包构建应用时,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. C#正则表达式匹配HTML中的图片路径

    最近的项目中有个关于网页取图的功能需要我自己开发,那就是用正则表达式来匹配图片标签. 一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“< ...

  2. django之创建第7个项目-url配置

    1.配置urls.py from django.conf.urls import patterns, include, url #Uncomment the next two lines to ena ...

  3. 转 configure: error: Cannot find ldap libraries in /usr/lib 解决办法

    今天在centos 6.2 64位版本上安装LNMP,config php的时候出现下面错误而退出 configure: error: Cannot find ldap libraries in /u ...

  4. RHEL7 添加网卡并设置多个IP地址

    首先在虚拟机管理界面中给该虚拟机添加一块虚拟网卡,VirtualBox虚拟机中要shutdown才能添加. [root@rhel7 ~]# nmcli device show | grep -i de ...

  5. 【TP3.2】TP3.2下实现ajax分页(原创+亲测可用)

    一,写在最开始:ajax分页的原理,是利用了js的ajax执行请求,获取分页list和分页page [代码块],去替换页面显示数据的[代码块] 技术:js的ajax + TP3.2的fetch(&qu ...

  6. Guice与Spring框架的区别

    2007-4-23  再借斧子的例子说一说spring与guice的区别     看下边对于不同社会形态下一个人(java对象,调用者)需要一把斧子(java对象,被调用者)的例子: (1),原始社会 ...

  7. appfuse的使用方法

     2008-07-27  appfuse是如何使用的? 比如我想编写一个 struts+spring+hibernate+ajax的网站,如何用appfuse加速我的开发进度呢 ----------- ...

  8. 九款命令行工具助力Linux环境下的数据分析

    对于大多数熟悉了图形工作环境的朋友来说,电子表格工具无疑是第一选项.但命令行工具同样能够更快更高效地解决问题——且只须稍微学习即可上手. 大部分此类工具冻严格局限于Linux,而多数可同样运行在Uni ...

  9. SaltStack入门到精通第一篇:安装SaltStack

    SaltStack入门到精通第一篇:安装SaltStack 作者:纳米龙  发布日期:2014-06-09 17:50:36   实际环境的设定: 系统环境: centos6 或centos5 实验机 ...

  10. 安装samba脚本

    Ubuntu_samba.sh #!/bin/sh echo "Ubuntu 14.04 文件服务器--samba的安装和配置" echo "更新源列表" su ...