专栏首页vue学习12、webpack从0到1-Prefetching/Preloading

12、webpack从0到1-Prefetching/Preloading

简单说下webpack中关于Prefetching/Preloading的设置。 git仓库:webpack-demo

1、是什么?

  • 首先解决的第一个问题就是prefetchingpreloading这两个是个啥子东西?
  • preloading:设置这个指令,就会在当前的页面中,以较高优先级预加载某个资源。其实就相当于浏览器的预加载,但是浏览器的预加载只会加载html中声明的资源,但是preloading突破了这个限制,连css和js资源也可以预加载一波。
  • Prefetching:设置这个指令,就表示允许浏览器在后台(空闲时)获取将来可能用得到的资源,并且将他们存储在浏览器的缓存中。
  • 这两种其实都是webpack提供的资源加载优化的方式,反正如果就是设置了这几个指令,就会先走个http的缓存,然后下次再次请求的时候直接从缓存里面拿,这样就节省了加载的时间。
  • 看到这里如果你懵逼了,我这里丢两个链接,你去看看,然后下面我们具体通过实践体会一下。

2、开始

  • 延续我们前面章节的代码,我们现在假设一个需求:对于footer.js底部栏来说,只有当页面body点击的时候才挂载上来。
  • import()方法是es6的动态加载模块方法,-->阮老师import讲解
  import { createLogo } from "./logo";
  import { createHeader } from "./header";
  import { createContent } from "./content";
- import { createFooter } from "./footer";

  createLogo();
  createHeader();
  createContent();
- createFooter()

// 动态加载footer模块
+ document.body.addEventListener("click", () => {
+   import("./footer.js").then(module => {
+     console.log(module);
+     module.createFooter();
+   });
+ });
  • 只有当我们点击页面的时候才会引入,这样我们就实现了动态的import引入footer模块了,ok,打包看一下。
  • 这个0.bundle.js就是footer.js经过codeSpliting代码分割以后所输出的文件,文件名什么的都能改,上章都有提及-->webpack从0到1-CodeSplitting代码分割

点击页面前

点击页面后

3、设置Prefetching

  • 那接下来设置一下Prefetching,很简单:
// 动态加载footer模块
document.body.addEventListener("click", () => {
+ import(/* webpackPrefetch: true */ "./footer.js").then(module => {
    console.log(module);
    module.createFooter();
  });
});
  • 但我们再次刷新浏览器打开控制台你就会看到,我们没有点击页面的时候它就会帮我自动先加载一遍0.bundle.js,然后当我们点击页面动态加载的时候,就是直接走的缓存了。

4、设置Preloading

  • 关于设置Preloading的就没有什么好说的了,其实也就是加一行代码,上面同样的位置设置为/* webpackPreload: true */就行了。
  • 两者的异同官网都有解释,中文文档也有,我就直接贴图了:
  • 最后我们小结一下。

5、小结

  • 其实webpack官网对于这两个东西的解释我觉得就比较到位了,Preloading什么时候用呢?比如说,你页面中的很多组件都用到了jQuery,比较强依赖这个东西,那么我们就可以当import引入jQuery库的时候设置为Preloading,让他预加载一波。
  • Prefetching我们一般用的比较多,也比较好理解,用官网的例子来说:一般当我们进入一个网站首页,只有当点击登录按钮的时候模态框才需要弹出来,那么我们就可以对这个login模态框组件做下Prefetching,当首页加载完毕,浏览器空闲的时候提前加载一下,这样当用户点击登录按钮就可以直接从缓存里面加载这个组件了。

参考链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • axios的封装与请求

    Ewall
  • 39、完成购物车页面

    Ewall
  • 小程序 — 实现左滑删除效果②

    (1)在上一章中,我们给movable-view绑定了一个bindchange事件,事件名为onChange,这个事件是干吗的呢?

    Ewall
  • 自定义注解实现参数验证与业务代码解耦

    Meet相识
  • 前端常用开发工具的路径解析配置

    题注:本文是 Webpack CheatSheet | Webpack 基础与实践清单的一部分,项目代码可以参考 fe-boilerplate | 多技术栈前端...

    王下邀月熊
  • HttpClient4.4 登录知乎(详细过程)

    HttpClient是java语言下一个支持http协议的客户端编程工具包,它实现了HTTP协议的所有方法,但是不支持JS渲染。我们在做一些小玩意时,有可能需要...

    zhangheng
  • 机器学习入门数据集--5.皮马人糖尿病预测数据集

    在本项目的前期训练中,数据最后的结果都不理想。因此在代码中引入了多种数据模型:逻辑回归、高斯朴素贝叶斯、K近邻分类、决策树分类、支持向量机分类、xgboost。...

    birdskyws
  • DWR的简单使用

    3 标签是dwr中重要的标签,用来描述 java(服务器端) 与 javascript (客户端)的交互方式。 其中,creator和javascript...

    qubianzhong
  • 使用Java 操作MinIO

    MinIO 是一款高性能、分布式的对象存储系统。它是一款软件产品, 可以100%的运行在标准硬件。即X86等低成本机器也能够很好的运行MinIO。MinIO与传...

    JAVA日知录
  • 更智能化的CDN技术,CDN迈向3.0时代

    我们的生活无时不刻不依赖着网络,伴随着终日对网速慢的抱怨和诅咒,同时也享受着网络技术发展带来的红利。怀着对技术细节刨根问底的执着,我们会发现原来身边还存在着像C...

    SDNLAB

扫码关注云+社区

领取腾讯云代金券