关于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性能优化之组件按需加载(以及一些常见的性能优化方法)的更多相关文章

  1. 基于python的opcode优化和模块按需加载机制研究(学习与个人思路)(原创)

    基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 个人技术博客:http://www.cnblogs.com/M ...

  2. 大规模服务网格性能优化 | Aeraki xDS 按需加载

    作者 钟华,腾讯云专家工程师,Istio project member.contributor,专注于容器和服务网格,在容器化和服务网格生产落地方面具有丰富经验,目前负责 Tencent Cloud ...

  3. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  4. pdfjs优化,实现按需加载,节省流量和内存

    1 问题 当使用pdfjs来实现预览功能的时候,遇到了2个问题: 一是带宽占用过大,会下载整个pdf文件,这对部署在公网的应用来说,成本压力很大,因为云服务带宽是很贵的. 二是内存占用过大,一个80M ...

  5. vue的异步组件按需加载

    当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...

  6. 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  7. vue 按需加载,缓存,导航守卫

    开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...

  8. React引入AntD按需加载报错

    背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...

  9. crm-vue项目上线前对加载速度以及兼容IE的一些方法

    一.关于IE浏览器适配 打包前我们可以在package.json文件做如下配置 "browserslist": [ "> 1%", "last ...

随机推荐

  1. Jenkins 修改主目录正解 workspace

    方法一: 停止Jenkins服务 net stop Jenkins 找到Jenkins安装目录,Config.config文件,找到WorkSpaceDir配置,修改为目标地址,保存. 启用Jenki ...

  2. git 回滚到上个版本命令以及忽略某些文件提交

    1.git回滚到上个版本 git reset --hard FETCH_HEAD 2.git忽略某些文件的提交 以前是用默认的.gitignore 然后再里面默认某些文件不提交.但是有个问题,.git ...

  3. P vs NP

    Complexity Class Computational problem Decision Problems Model of computation Time-complexity classe ...

  4. editplus 格式化 js、html、xml、css

    没有文件扩展”js”的脚本引擎的问题的解决办法 解决办法如下: 打开注册表编辑器,定位"HKEY_CLASSES_ROOT" > ".js" 这一项,双击 ...

  5. shell语句

    一.判断目录是否存在:#!/bin/bash#/bin/bash -n filename.sh 判断语句是否正确 DIR=/root/zhjif [ ! -d $DIR ];then mkdir $D ...

  6. Eclipse环境下配置Tomcat,并且把项目部署到Tomcat服务器上

    一 配置Tomcat 1.打开Eclipse,单击"Window"菜单,选择下方的"Preferences". 2.单击"Server"选项 ...

  7. servlet-api-2.5.jar - jar not loaded

    由于包重复,把发布后的项目中的servlet-api-2.5.jar删除,不要clean项目,直接重新启动server即可.由于优先使用项目中的包,而实际使用需要tomcat中的包导致,直入页面会报o ...

  8. 使用virtualenv的正确姿势

    关于virtualenv是什么我想我不用介绍的吧.用python做开发的人要是不会用virtualenv,总有一天会被各种环境恶心死.那么我今天就来讲一讲使用virtualenv的正确姿势. virt ...

  9. 【C++】随机重命名MP3文件

    新置MP3一件,竟然没有随机播放的功能.坑啊!身为程序媛一枚,自己动手吧~ 获取当前路径: char buf[1000]; GetCurrentDirectory(1000,buf); string ...

  10. UVa 1220 - Party at Hali-Bula(树形DP)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...