精选文章 webpack Prefetching/Preloading

webpack Prefetching/Preloading

作者:冰魂破 时间: 2021-02-05 09:43:11
冰魂破 2021-02-05 09:43:11
【摘要】1:是什么 
preloading:设置这个指令,就会在当前的页面中,以较高优先级预加载某个资源。其实就相当于浏览器的预加载,但是浏览器的预加载只会加载html中声明的资源,但是preloading突破了这个限制,连css和js资源也可以预加载一波。 
Prefetching:设置这个指令,就表示允许浏览器在后台(空闲时)获取将来可能用得到的资源,并且将他们存储在浏览器的缓存中。 这两种其实...

1:是什么

preloading:设置这个指令,就会在当前的页面中,以较高优先级预加载某个资源。其实就相当于浏览器的预加载,但是浏览器的预加载只会加载html中声明的资源,但是preloading突破了这个限制,连css和js资源也可以预加载一波。

Prefetching:设置这个指令,就表示允许浏览器在后台(空闲时)获取将来可能用得到的资源,并且将他们存储在浏览器的缓存中。
这两种其实都是webpack提供的资源加载优化的方式,反正如果就是设置了这几个指令,就会先走个http的缓存,然后下次再次请求的时候直接从缓存里面拿,这样就节省了加载的时间。

 

设置Prefetching  

使用魔法注释的方式,在需要预加载的地方添加:

document.body.addEventListener("click", () => {
+ import(/* webpackPrefetch: true */ "./footer.js").then(module => { console.log(module); module.createFooter();
  });
});

设置Preloading

document.body.addEventListener("click", () => {
+ import(/* webpackPreload: true */ "./footer.js").then(module => { console.log(module); module.createFooter();
  });
});

 

 

Preloading什么时候用呢?比如说,你页面中的很多组件都用到了jQuery,比较强依赖这个东西,那么我们就可以当import引入jQuery库的时候设置为Preloading,让他预加载一波。

Prefetching我们一般用的比较多,也比较好理解,用官网的例子来说:一般当我们进入一个网站首页,只有当点击登录按钮的时候模态框才需要弹出来,那么我们就可以对这个login模态框组件做下Prefetching,当首页加载完毕,浏览器空闲的时候提前加载一下,这样当用户点击登录按钮就可以直接从缓存里面加载这个组件了。
 

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:1095:数1的个数

下一篇:存储直通、PCI直通和SR-IOV

您可能感兴趣

  • Vue2.0使用vue-cli + webpack搭建项目

    Vue2.0使用vue-cli + webpack搭建项目 说明:总结搭建vue2.0项目的步骤 一、安装环境 1、这个问题不需要多少,必备的node环境及npm 2、全局安装webpack 打开终端(或cmd)输入: npm install webpack -g ,等待安装完成再输入:webpack -v 查看版本号,如果出现版本号则说明安装成功 3...

  • webpack基础配置梳理梳理

    首先来一个示例的目录结构--- Application |--- Home | |--- View (线上用户访问的.html目录) --- Public (线上资源文件目录) |--- js |--- images |--- css |--- ...

  • webpack学习

    贴出项目中webpack相关配置,逐个解析 1. 生产环境配置 webpack.config.prod.js var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ...

  • webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息。(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写...

  • webpack ,require.ensure配合oclazyload 实现ng1模块懒加载

    2019独角兽企业重金招聘Python工程师标准>>> import angular from 'angular' import 'angular-ui-router' import 'oclazyload' import 'bootstrap/dist/css/bootstrap.min.css' import AppComponent from './app.component...

  • 摆脱跨域限制,配置 webpack 将接口代理到本地

    2019独角兽企业重金招聘Python工程师标准>>> 我们的实际项目中,很多接口都是不允许我们这样跨域请求的。 而我们的开发环境下,不可能跑到服务器上直接开发,或者在本地直接搞一个服务器环境,这样就违背了我们前后端分离开发的初衷了。 如何解决这个问题呢?其实非常好办,要知道 跨域不是接口的限制 而是浏览器为了保障数据安全做的限制。因此,一种方法可以解决,那就是打开浏览器的限制,...

  • webpack的使用详解

    2019独角兽企业重金招聘Python工程师标准>>> Webpack webpack 官网 bundle [ˈbʌndl] 捆绑,收集,归拢,把…塞入 概述 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler) webpack 是一个模块化方案(预编译) webpack 获取具有依赖关系的模块,并生成表示这些模块的静态资源 四个...

  • 入门学习webpack打包工具(一)

    作为一个学习webpack打包工具的初学者,看了很多文章。根据自己的理解,总结了一些学习webpack的学习的内容,这篇文章仅作为个人用来巩固,复习webpack打包工具的参考。适合入门的前端爱好者阅读,希望对你我会起到一定的作用。不喜勿喷。  什么是webpack? webpack的官方定义是“模块打包工具,当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
webpack Prefetching/Preloading介绍:华为云为您免费提供webpack Prefetching/Preloading在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多webpack Prefetching/Preloading的相关内容。| 移动地址: webpack Prefetching/Preloading | 写博客