打包分析:

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的更多相关文章

  1. vue-cli@webpack@4打包分析命令

    一.命令 npm run build --report 该命令在打包完之后,可以分析包的大小(如下图),从而分析那一块打包太大了可以进行优化处理.

  2. create-react-app 搭建的项目中,引入 webpack-bundle-analyzer 打包分析

    安装npm intall webpack-bundle-analyzer --save-dev 在 config/webpack.config.prod.js 文件(推荐)或 config/webpa ...

  3. H264码流打包分析(精华)

    H264码流打包分析 SODB 数据比特串-->最原始的编码数据 RBSP 原始字节序列载荷-->在SODB的后面填加了结尾比特(RBSP trailing bits 一个bit“1”)若 ...

  4. webpack独立打包与缓存处理

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...

  5. express整合webpack的打包文件dist

    对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结: 前端开发:vue-cli+webpack: 后台开发:nodejs框架expres ...

  6. webpack 基本打包方法

    webpack的打包基本配置文件webpack.config.js 可以在webpack.config.js里面写好配置:比如前章节所总结的四大核心 |-- add.js // 定义一个普通加法函数 ...

  7. webpack 单独打包指定JS文件(CopyWebpackPlugin)

    背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...

  8. webpack项目打包配置

    webpack.config.js 文件中,其中“plugins”最为重要 var path = require("path"); const webpack = require( ...

  9. vue-cli、create-react-app 项目如何查看打包分析?

    vue-cli.create-react-app 项目如何查看打包分析? 项目 如何查看打包分析 vue-cli 创建的项目 已经集成 webpack-bundle-analyzer,运行npm ru ...

随机推荐

  1. LeetCode 第27题--移除元素

    1. 题目 2.题目分析与思路 3.代码 1. 题目 给定 nums = [3,2,2,3], val = 3, 函数应该返回新的长度 2, 并且 nums 中的前两个元素均为 2. 你不需要考虑数组 ...

  2. Scrapy去重

    一.原生 1.模块 from scrapy.dupefilters import RFPDupeFilter 2.RFPDupeFilter方法 a.request_seen 核心:爬虫每执行一次yi ...

  3. 修改现有消息类让.net core项目支持Protobuf - 【无需使用 [ProtoBuf.ProtoContract] 的方法】

    前言 第二次发博客,希望大家多多鼓励!!! 又接无上老板的一个需求,需要让.net core消息发送端跟消息接收端通信的消息是protobuf格式的(基于protobuf比json小一倍数据量,独特的 ...

  4. Android studio 连接真机

    首先用数据线连接真机 1.打开开发者模式(小米手机mix2s为例 设置->我的设备->全部参数->连续点击MIUI版本——开启成功) 2.在更多设置中找到系统安全设置——允许安装未知 ...

  5. Spring MVC中的拦截器Interceptor

    谈谈spring中的拦截器 在web开发中,拦截器是经常用到的功能.它可以帮我们验证是否登陆.预先设置数据以及统计方法的执行效率等等.今天就来详细的谈一下spring中的拦截器.spring中拦截器主 ...

  6. [题解][Codeforces]Good Bye 2019 简要题解

    构造题好评,虽然这把崩了 原题解 A 题意 二人游戏,一个人有 \(k_1\) 张牌,另一个人 \(k_2\) 张,满足 \(2\le k_1+k_2=n\le 100\),每张牌上有一个数,保证所有 ...

  7. git使用中遇到的问题

    1.拉取时报错:Permission denied (publickey) 先检查一下你的乌龟设置是否用的不是乌龟自己的SSH 2.TortoiseGit报错: Couldn’t load this ...

  8. Set,Multiset,Iterator(迭代器)详解

    Set,Multiset,Iterator(迭代器) Iterator:迭代器 我们可以发现所谓一些数据结构比如说数组和链表,它们都有一些相似的性质.我们看下面两个例子: 数组:定义数组\(int~a ...

  9. Qt Installer Framework翻译(7-5)

    操作 这些操作由组件和控制脚本准备,并由安装程序执行. 注意:操作是通过线程执行的. 在内部,每个操作都有一个DO步骤,包含有关安装程序的说明,以及一个UNDO步骤,包含有关卸载程序的说明. 操作总结 ...

  10. 机器学习-TensorFlow应用之classification和ROC curve

    概述 前面几节讲的是linear regression的内容,这里咱们再讲一个非常常用的一种模型那就是classification,classification顾名思义就是分类的意思,在实际的情况是非 ...