webpack系统学习(六)打包分析,Preload和Prefetch
1. 打包分析
我们需要在使用webpack的时候添加一些配置:
webpack --profile --json > stats.json
这个配置会在打包完成之后生成一个stats.json
文件,这个文件中就包含了一些打包过程和打包结果的很多信息,我们可以借助下面的几个网站来上传该文件并分析:
http://webpack.github.com/analyse/;
http://alexkuz.github.io/webpack-chart/;
这里我推荐使用Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()]
}
2. Preload,Prefetch
在我们之前学习的webpack Code Splitting的配置中,我们知道了splitChunks: { chunks: 'async'}
中chunks的默认选项就是async,也就是webpack默认只会对异步的模块进行代码分割。通过后文的分析,我们知道,同步导入的模块并不一定会提高用户第一次访问时的加载速度。接下来我们再看看这一段代码:
//inde.js
document.addEventListener('click',()=>{var ele = document.createElement('div')ele.innerHTML = "Niall August"document.body.appendChild(ele)
})
打包后,打开网页文件,查看浏览器devtools的coverage:
我们发现main.js
的使用率为77.9%,查看代码我们发现:
中间的红色部分表示的是没有使用到的代码。当我们点击之后:
这时候,这段代码才发挥了它的作用。
这一段我们导入的代码,在页面没有被点击之前,其实都是没有存在的意义的,用户在没有点击之前,不需要这一段代码,但是这里却加载了这段代码,也就是增加了用户访问网站时的网络负荷。所以,我们采取异步导入模块的方法,而这,才能真正提高用户的访问体验。
修改代码如下:
//index.js
document.addEventListener('click',()=>{import('./async').then(({default: func})=>{func()})
})
//async.js
module.exports = dosomething = ()=>{var ele = document.createElement('div')ele.innerHTML = "Niall August"document.body.appendChild(ele)
}
现在我们再看看coverage:
在我们没有点击页面之前,利用率从77.9%提升到了79.4%,而这仅仅是一个小小的测试,当我们在项目合理使用异步引入,这将是很好地性能提升。这也是为什么webpack默认只对异步导入的模块进行代码分割的原因。
在我们进入segmentfault社区的时候,上图中的登录注册弹窗是否需要一并加载呢?
如果用户不点击登录注册按钮,这个弹窗就不会出现,所以,理想情况下,用户在加载页面的时候并不需要加载这个弹窗所需要的代码,而在用户点击登录注册按钮的时候,这部分代码再被加载。
看到这里,我们可能会有疑问,如果此弹窗的代码文件较大,那么按照上面的加载方式可能会导致用户在使用过程中等待,这种情况下,不就会弊大于利了吗?
当页面被加载完毕之后,网络带宽得到了释放,此时网络就是空闲状态,那么,我们可不可以在空闲状态下加载弹窗这一类的代码,而不是在点击按钮之后再去下载?
这时候,就是Prefetching的用武之地了!
修改代码如下:
document.addEventListener('click',()=>{import(/* webpackPrefetch:true */'./async').then(({default: func})=>{func()})
})
这个注释/* webpackPrefetch:true */
就能使异步模块在网络空闲的时候能够被预先加赞。
那Preload又有什么用呢?
preload表示用户十分有可能需要在当前浏览中加载目标资源,所以浏览器必须预先获取和缓存对应资源。
这样看来:
preload主要用于预加载当前页面需要的资源;而prefetch主要用于加载将来页面可能需要的资源;
preload的特点:
- preload加载的资源是在浏览器渲染机制之前进行处理的,并且不会阻塞onload事件;
- preload可以支持加载多种类型的资源,并且可以加载跨域资源;
- preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载相应的脚本代码,待到需要时自行调用;
webpack系统学习(六)打包分析,Preload和Prefetch相关推荐
- [系统安全] 六.逆向分析之条件语句和循环语句源码还原及流程控制
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
- R语言学习(六)——关联规则分析
什么是关联规则 引例:啤酒与尿布 发现了买尿布的顾客经常也会买啤酒后,超市把两者摆在一起,从而提高了两者的销量.具体原因是:年轻的父亲下班回家的路上需要给孩子买尿布,但他们又没空去酒吧,所以就通常也给 ...
- Gephi简易学习[六]———— 拓展分析红楼梦数据
拓展分析:我们需要在下面操作流程某一步进行改动,然后看看对结果有什么影响 操作流程 统计分析→外观→布局→过滤 Gephi简易学习[五]---- 分析红楼梦数据,了解Gephi操作流程中的 最终结果 ...
- webpack系统学习(十四)如何编写一个loader
1. 创建一个简单的loader 所谓 loader 只是一个导出为函数的 JavaScript 模块.loader runner 会调用这个函数,然后把上一个 loader 产生的结果或者资源文件( ...
- swift4.1 系统学习六
swift学习笔记6 字符和字符串 在swift中,String类型也是结构体,属于值类型,而不是引用类型.这一点,与OC是不一样的. // // main.swift // swift06 // / ...
- 了不起的 Webpack HMR 学习指南(含源码分析)
学习时间:2020.06.14 学习章节:<Webpack HMR 原理解析> 一.HMR 介绍 Hot Module Replacement(以下简称:HMR 模块热替换)是 Webpa ...
- Webpack:打包分析,Preloading, Prefetching
打包分析概念 当用webpack代码打包之后,可以借助打包分析的工具对打包生成的文件进行一定的分析,分析打包是否合理 分析工具:https://github.com/webpack/analyse 分 ...
- Webpack 4 学习09(打包生成html)
所需插件 html-webpack-plugin 本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置) **了解html-webpack-plugin** HtmlW ...
- 360°大视野安全帽识别系统-深度学习智能视频分析
经济飞速发展,科技进步日新月异.360°大视野安全帽将有效保证工地.矿区等易有掉落物体的作业区域发生危险的几率大大降低,减少人员伤亡和财产损失,维护正常的作业秩序.安全帽识别系统运用科技手段来进行监督 ...
最新文章
- 开机出现grub rescue无法进入系统 恢复ubuntu系统下grub引导 windows xp和ubuntu9.10双系统引导程序的修复
- 手机浏览器UserAgnet大全
- 走完线上 BUG 定位最后一公里
- 19行代码AC——习题3-4 周期串(UVa-455)_解题报告
- 面试题 锁消除是什么
- 120分钟React快速扫盲教程
- notify_one() 或 notify_all() 在c++中的使用要点
- 黑科技揭秘:3分钟,轻松构建一张覆盖全球的企业专有网络
- 小写数字转大写_不得不说的Excel小技巧:设置单元格格式将小写金额转换成大写...
- python异步线程算法应用_Python多线程----线程池以及线程实现异步任务
- win10自带邮件mail登录qq邮箱126邮箱等时提示需注意的解决办法
- DDoS deflate:自动屏蔽DDOS攻击IP
- 标准库之正则表达式3-前后向管理
- docker容器化部署nginx前端项目
- 生存智慧——新的生活方式
- 使用母版页实现页面布局
- tp5.1 定义公共属性initialize parent 其它控制器内能直接引用 同时继承已有的控制器初始化
- Oracle的物化视图
- FCFS,SJF以及PSA进程调度算法效率的比较
- Python pywinauto 自动操作Windows GUI