vue2.x 路由懒加载 优化打包体积
当打包构建应用时,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 路由懒加载 优化打包体积的更多相关文章
- vue2实现路由懒加载
一.什么是懒加载 顾名思义,懒加载就是随用随加载,什么时候需要就什么时候加载. 二.为什么需要懒加载 在单页应用中,如果没有使用懒加载,webpack打包后的文件会很大,这时进入首页时的加载时间会很长 ...
- vue项目性能优化(路由懒加载、gzip加速、cdn加速)
前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...
- vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)
今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...
- vue3 + vite实现异步组件和路由懒加载
在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...
- vue-cli 项目实现路由懒加载
在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...
- vue-router路由懒加载(解决vue项目首次加载慢)
懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...
- vue的路由懒加载
路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...
- 【巷子】---vue路由懒加载---【vue】
一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载, 二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
随机推荐
- C#正则表达式匹配HTML中的图片路径
最近的项目中有个关于网页取图的功能需要我自己开发,那就是用正则表达式来匹配图片标签. 一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“< ...
- django之创建第7个项目-url配置
1.配置urls.py from django.conf.urls import patterns, include, url #Uncomment the next two lines to ena ...
- 转 configure: error: Cannot find ldap libraries in /usr/lib 解决办法
今天在centos 6.2 64位版本上安装LNMP,config php的时候出现下面错误而退出 configure: error: Cannot find ldap libraries in /u ...
- RHEL7 添加网卡并设置多个IP地址
首先在虚拟机管理界面中给该虚拟机添加一块虚拟网卡,VirtualBox虚拟机中要shutdown才能添加. [root@rhel7 ~]# nmcli device show | grep -i de ...
- 【TP3.2】TP3.2下实现ajax分页(原创+亲测可用)
一,写在最开始:ajax分页的原理,是利用了js的ajax执行请求,获取分页list和分页page [代码块],去替换页面显示数据的[代码块] 技术:js的ajax + TP3.2的fetch(&qu ...
- Guice与Spring框架的区别
2007-4-23 再借斧子的例子说一说spring与guice的区别 看下边对于不同社会形态下一个人(java对象,调用者)需要一把斧子(java对象,被调用者)的例子: (1),原始社会 ...
- appfuse的使用方法
2008-07-27 appfuse是如何使用的? 比如我想编写一个 struts+spring+hibernate+ajax的网站,如何用appfuse加速我的开发进度呢 ----------- ...
- 九款命令行工具助力Linux环境下的数据分析
对于大多数熟悉了图形工作环境的朋友来说,电子表格工具无疑是第一选项.但命令行工具同样能够更快更高效地解决问题——且只须稍微学习即可上手. 大部分此类工具冻严格局限于Linux,而多数可同样运行在Uni ...
- SaltStack入门到精通第一篇:安装SaltStack
SaltStack入门到精通第一篇:安装SaltStack 作者:纳米龙 发布日期:2014-06-09 17:50:36 实际环境的设定: 系统环境: centos6 或centos5 实验机 ...
- 安装samba脚本
Ubuntu_samba.sh #!/bin/sh echo "Ubuntu 14.04 文件服务器--samba的安装和配置" echo "更新源列表" su ...