Vue性能优化之组件按需加载(以及一些常见的性能优化方法)
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车!
1、webpack2 + ES5结合开车
没发车前,我们页面加载的js是这样的:
任你随便点,你就只加载了这一个app.js文件,你所有的组件都在这里面
准备发车:把你的路由中引入组件的方式改成这样:
再来看看我们的页面上加载的js文件(开车后):
只有当你加载了这个CityPicker组件的时候,我才引入它,也就是0.js,这就实现了异步加载,大概意思就是把我们的组件变成了一个函数,刚开始的时候它是不执行的,只有当你需要它的时候来触发它了它才会加载进来。
1、webpack代码分割结合AMD规范的require
开车前就不说了,无论你怎么挣扎,你所有的东西都在app.js里,一次性全给你加再进来,准备发车:
发车准备:把你路由里面引入组件的形式变成这样:
发车后的形态:
漂亮,同样达到了我们想要的效果
3、webpack的ensure来进行终极开车:
简单说一下它的思想:webpack编译时,会静态的解析代码中的require.ensure(),同时将模块添加到一个分开的chunk中,新的chunk会被webpack通过jsonp来按需加载。此方法内部依赖于Promise。
一共有三个参数:
参数一:字符串数组,模块的依赖项,会提前进行加载,一般情况下为空。
参数二:依赖项加载完成之后的回调函数。
参数三:chunk名。相同chunk名的文件,所有的依赖都会被放进相同的文件束中。
开始发车
发车前:将你的引入组件的方式改成这样:
发车后:
同样实现了异步加载,并且最终要的是,City就是chunk名,相同chunk名的的文件,所有的依赖都会被放到相同的文件束中。
异步加载可以大大的提高性能,避免不必要的资源浪费,今天关于vue的性能优化就先到这里,下课,额再补充几个Vue中性能优化的方法吧:
1. 可以使用computed计算属性来代替一些函数方法,(函数的话每次都会调用一次,计算属性是根据它依赖的值变化了才会执行);
2. 对于一些不需要频繁调用的形式,使用v-if来取代v-show。(v-if的话是只有它存在了才会进行渲染,而v-show是无论如何都会渲染,只不过是将它隐藏了而已);
3. 为item设置唯一的key值。(快速精准的定位到diff);
4. SSR(服务器端渲染);
5. 骨架屏加载。(在数据还没来之前显示骨架屏,提高用户体验);
6. loading图。(提高用户体验度,用户第一);
7. 图片按需加载,图片懒加载技术。(避免不必要的资源浪费)。
...未完待续
Vue性能优化之组件按需加载(以及一些常见的性能优化方法)的更多相关文章
- 基于python的opcode优化和模块按需加载机制研究(学习与个人思路)(原创)
基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 个人技术博客:http://www.cnblogs.com/M ...
- 大规模服务网格性能优化 | Aeraki xDS 按需加载
作者 钟华,腾讯云专家工程师,Istio project member.contributor,专注于容器和服务网格,在容器化和服务网格生产落地方面具有丰富经验,目前负责 Tencent Cloud ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- pdfjs优化,实现按需加载,节省流量和内存
1 问题 当使用pdfjs来实现预览功能的时候,遇到了2个问题: 一是带宽占用过大,会下载整个pdf文件,这对部署在公网的应用来说,成本压力很大,因为云服务带宽是很贵的. 二是内存占用过大,一个80M ...
- vue的异步组件按需加载
当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...
- 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》
针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并, cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...
- vue 按需加载,缓存,导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
- React引入AntD按需加载报错
背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...
- crm-vue项目上线前对加载速度以及兼容IE的一些方法
一.关于IE浏览器适配 打包前我们可以在package.json文件做如下配置 "browserslist": [ "> 1%", "last ...
随机推荐
- Jenkins 修改主目录正解 workspace
方法一: 停止Jenkins服务 net stop Jenkins 找到Jenkins安装目录,Config.config文件,找到WorkSpaceDir配置,修改为目标地址,保存. 启用Jenki ...
- git 回滚到上个版本命令以及忽略某些文件提交
1.git回滚到上个版本 git reset --hard FETCH_HEAD 2.git忽略某些文件的提交 以前是用默认的.gitignore 然后再里面默认某些文件不提交.但是有个问题,.git ...
- P vs NP
Complexity Class Computational problem Decision Problems Model of computation Time-complexity classe ...
- editplus 格式化 js、html、xml、css
没有文件扩展”js”的脚本引擎的问题的解决办法 解决办法如下: 打开注册表编辑器,定位"HKEY_CLASSES_ROOT" > ".js" 这一项,双击 ...
- shell语句
一.判断目录是否存在:#!/bin/bash#/bin/bash -n filename.sh 判断语句是否正确 DIR=/root/zhjif [ ! -d $DIR ];then mkdir $D ...
- Eclipse环境下配置Tomcat,并且把项目部署到Tomcat服务器上
一 配置Tomcat 1.打开Eclipse,单击"Window"菜单,选择下方的"Preferences". 2.单击"Server"选项 ...
- servlet-api-2.5.jar - jar not loaded
由于包重复,把发布后的项目中的servlet-api-2.5.jar删除,不要clean项目,直接重新启动server即可.由于优先使用项目中的包,而实际使用需要tomcat中的包导致,直入页面会报o ...
- 使用virtualenv的正确姿势
关于virtualenv是什么我想我不用介绍的吧.用python做开发的人要是不会用virtualenv,总有一天会被各种环境恶心死.那么我今天就来讲一讲使用virtualenv的正确姿势. virt ...
- 【C++】随机重命名MP3文件
新置MP3一件,竟然没有随机播放的功能.坑啊!身为程序媛一枚,自己动手吧~ 获取当前路径: char buf[1000]; GetCurrentDirectory(1000,buf); string ...
- UVa 1220 - Party at Hali-Bula(树形DP)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...