webpack之打包分析以及prefetching和preloading
打包分析:
https://webpack.js.org/guides/code-splitting/#bundle-analysis
性能优化使用缓存是很有限的,现在更多的应该是再编写代码时,考虑到代码的覆盖率,如何让页面加载的js文件利用率提高,有些交互后才能用到的代码可以写在异步组件里通过懒加载的形式,把这块的代码逻辑加载进来,这样就可以提高代码的性能,页面访问速度也会加快。如果感觉懒加载影响用户体验,这个时候就可以用prefetch。
预取/预加载模块 Prefetching/Preloading modules
webpack 4.6.0+增加了对预取和预加载的支持。
- 在声明您的导入时使用这些内联指令可以使webpack输出“ Resource Hint”,它告诉浏览器:
- prefetch(预取):将来可能需要一些导航资源
- preload(预加载):当前导航期间可能需要资源
简单的预取示例可以包含一个HomePage
组件,该组件呈现一个LoginButton
组件,然后按需LoginModal
在单击后加载该组件。
LoginButton.js
//...
import(/* webpackPrefetch: true */ 'LoginModal');
这将导致将<link rel="prefetch" href="login-modal-chunk.js">
其附加在页面的开头,这将指示浏览器在空闲时间预取login-modal-chunk.js
文件。
一旦父块被加载,webpack将添加预取提示。
- 与Prefetch相比,Preload指令有很多区别:
- 预加载的块开始并行于父块加载。父块完成加载后,预取的块开始。
- 预加载的块具有中等优先级,可以立即下载。浏览器空闲时,将下载预提取的块。
- 父块应立即请求预加载的块。预取的块可以在将来的任何时候使用。
- 浏览器支持不同。
可以有一个简单的预加载示例,该示例Component
始终依赖于应放在单独块中的大型库。
让我们想象一个ChartComponent
需要巨大的组件ChartingLibrary
。它显示了LoadingIndicator
何时渲染,并立即按需导入ChartingLibrary
:
ChartComponent.js
//...
import(/* webpackPreload: true */ 'ChartingLibrary');
当ChartComponent
请求使用的页面时,也会通过来请求charting-library-chunk <link rel="preload">
。假设页面块较小,并且完成速度更快,则页面将显示为LoadingIndicator
,直到已经请求charting-library-chunk
完成。这将增加一点加载时间,因为它只需要一个往返而不是两个。特别是在高延迟环境中。
错误地使用webpackPreload实际上会损害性能,因此在使用时要小心。
参考:https://webpack.js.org/guides/code-splitting/#bundle-analysis
webpack之打包分析以及prefetching和preloading的更多相关文章
- vue-cli@webpack@4打包分析命令
一.命令 npm run build --report 该命令在打包完之后,可以分析包的大小(如下图),从而分析那一块打包太大了可以进行优化处理.
- create-react-app 搭建的项目中,引入 webpack-bundle-analyzer 打包分析
安装npm intall webpack-bundle-analyzer --save-dev 在 config/webpack.config.prod.js 文件(推荐)或 config/webpa ...
- H264码流打包分析(精华)
H264码流打包分析 SODB 数据比特串-->最原始的编码数据 RBSP 原始字节序列载荷-->在SODB的后面填加了结尾比特(RBSP trailing bits 一个bit“1”)若 ...
- webpack独立打包与缓存处理
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...
- express整合webpack的打包文件dist
对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结: 前端开发:vue-cli+webpack: 后台开发:nodejs框架expres ...
- webpack 基本打包方法
webpack的打包基本配置文件webpack.config.js 可以在webpack.config.js里面写好配置:比如前章节所总结的四大核心 |-- add.js // 定义一个普通加法函数 ...
- webpack 单独打包指定JS文件(CopyWebpackPlugin)
背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...
- webpack项目打包配置
webpack.config.js 文件中,其中“plugins”最为重要 var path = require("path"); const webpack = require( ...
- vue-cli、create-react-app 项目如何查看打包分析?
vue-cli.create-react-app 项目如何查看打包分析? 项目 如何查看打包分析 vue-cli 创建的项目 已经集成 webpack-bundle-analyzer,运行npm ru ...
随机推荐
- LeetCode 第27题--移除元素
1. 题目 2.题目分析与思路 3.代码 1. 题目 给定 nums = [3,2,2,3], val = 3, 函数应该返回新的长度 2, 并且 nums 中的前两个元素均为 2. 你不需要考虑数组 ...
- Scrapy去重
一.原生 1.模块 from scrapy.dupefilters import RFPDupeFilter 2.RFPDupeFilter方法 a.request_seen 核心:爬虫每执行一次yi ...
- 修改现有消息类让.net core项目支持Protobuf - 【无需使用 [ProtoBuf.ProtoContract] 的方法】
前言 第二次发博客,希望大家多多鼓励!!! 又接无上老板的一个需求,需要让.net core消息发送端跟消息接收端通信的消息是protobuf格式的(基于protobuf比json小一倍数据量,独特的 ...
- Android studio 连接真机
首先用数据线连接真机 1.打开开发者模式(小米手机mix2s为例 设置->我的设备->全部参数->连续点击MIUI版本——开启成功) 2.在更多设置中找到系统安全设置——允许安装未知 ...
- Spring MVC中的拦截器Interceptor
谈谈spring中的拦截器 在web开发中,拦截器是经常用到的功能.它可以帮我们验证是否登陆.预先设置数据以及统计方法的执行效率等等.今天就来详细的谈一下spring中的拦截器.spring中拦截器主 ...
- [题解][Codeforces]Good Bye 2019 简要题解
构造题好评,虽然这把崩了 原题解 A 题意 二人游戏,一个人有 \(k_1\) 张牌,另一个人 \(k_2\) 张,满足 \(2\le k_1+k_2=n\le 100\),每张牌上有一个数,保证所有 ...
- git使用中遇到的问题
1.拉取时报错:Permission denied (publickey) 先检查一下你的乌龟设置是否用的不是乌龟自己的SSH 2.TortoiseGit报错: Couldn’t load this ...
- Set,Multiset,Iterator(迭代器)详解
Set,Multiset,Iterator(迭代器) Iterator:迭代器 我们可以发现所谓一些数据结构比如说数组和链表,它们都有一些相似的性质.我们看下面两个例子: 数组:定义数组\(int~a ...
- Qt Installer Framework翻译(7-5)
操作 这些操作由组件和控制脚本准备,并由安装程序执行. 注意:操作是通过线程执行的. 在内部,每个操作都有一个DO步骤,包含有关安装程序的说明,以及一个UNDO步骤,包含有关卸载程序的说明. 操作总结 ...
- 机器学习-TensorFlow应用之classification和ROC curve
概述 前面几节讲的是linear regression的内容,这里咱们再讲一个非常常用的一种模型那就是classification,classification顾名思义就是分类的意思,在实际的情况是非 ...