webpack的懒加载和预加载详解

目录
  • 正常加载
  • 懒加载
  • 预加载
    • 没有使用预加载
    • 使用预加载
  • 总结

正常加载

为了看的方便，index.js中的代码非常简单

console.log('index.js执行了')
import { test } from './test.js'
document.getElementById('btn-wrap').onclick = function () {
    test()
}

test.js

console.log('test.js执行了')
export function test() {
    const value = 'hello world'
    console.log('test value: ', value)
}

在index.html中添加按钮

    <button id='btn-wrap'>点击</button>

执行webpack命令：

可以看到没有点击按钮时，test.js就已经加载了 。如果test.js比较大，加载比较耗性能。我们就希望能在需要使用的时候在加载

懒加载

修改index.js中的代码

console.log('index.js执行了')
// import { test } from './test.js'
// document.getElementById('btn-wrap').onclick = function () {
//     test()
// }
document.getElementById('btn-wrap').onclick = function () {
    console.log('====  点击按钮')
    import(/*webpackChunkName:'test' */"./test")
        .then(({test}) => {
            console.log('test加载成功')
            test()
        })
        .catch(error => {
            console.log('test加载失败 error:', error)
        })
}

再次执行webpack命令，在浏览器中查看日志

点击按钮之前只加载了index.js

点击按钮：

可以看到点击按钮之后test.js才执行。

预加载

懒加载实现了js文件按需加载，在需要使用时才进行加载，但是如果js文件非常大加载速度比较慢，在使用时再加载就会使页面出现卡顿。为了优化这个问题，可以使用Prefetch先预加载。

没有使用预加载

点击按钮之前不会加载test.js文件

点击按钮之后才会去加载test.js文件

使用预加载

设置webpackPrefetch:true使用预加载

document.getElementById('btn-wrap').onclick = function () {
    console.log('====  点击按钮')
    import(/*webpackChunkName:'test' ,webpackPrefetch:true*/"./test")
        .then(({test}) => {
            console.log('test加载成功')
            test()
        })
        .catch(error => {
            console.log('test加载失败 error:', error)
        })
}

点击按钮之前就预加载了test.js文件：

点击按钮：

总结

正常加载：很多资源并行加载，同一时间加载多个文件

懒加载：需要时才加载

预加载：等其他资源加载完毕，浏览器空闲了，再偷偷加载被设置为预加载的资源

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JS图片预加载插件详解

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 2)区别: 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数.预加载可以说

  • 详解webpack + react + react-router 如何实现懒加载

    在 Webpack 1 中主要是由bundle-loader进行懒加载,而 Webpack 2 中引入了类似于 SystemJS 的System.import语法,首先我们对于System.import的执行流程进行简单阐述: Webpack 会在编译过程中扫描代码库时将发现的System.import调用引入的文件及其相关依赖进行单独打包,注意,Webpack 会保证这些独立模块及其依赖不会与主应用的包体相冲突. 当我们访问到这些独立打包的组件模块时,Webpack 会发起 JSONP 请求来

  • webpack4 SCSS提取和懒加载的示例

    本节课讲解在webpack v4中的 SCSS 提取和懒加载.值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别. >>> 本节课源码 >>> 所有课程源码 1. 准备工作 关于 SCSS 处理的基础,请参考webpack4 处理 SCSS. 本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用. 下图展示了这次的目录代码结构: 为了实现 SCSS 懒加载,我们使用了extract-text-webpack-plugin插件. 需要注意,在安

  • javascript实现图片预加载和懒加载

    javascript实现图片预加载和懒加载

    本文实例为大家分享了javascript实现图片预加载和懒加载的具体代码,供大家参考,具体内容如下 预加载 预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取.举个栗子, 比如一个网站的开场动画, 这些动画是由很多图片组成的, 假如不预先加载好, 那就会造成动画不流畅产生闪动白屏.图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,保证了图片快速.无缝地发布,使用户在浏览你网站内容时获得更好的用户体验. //这里我把图片数量写死了,而且对图片名也有要求必须是阿拉伯数字后缀

  • js中延迟加载和预加载的具体使用

    延迟加载(懒加载)和预加载是常用的 web 优化的手段.. 一.延迟加载(懒加载) 原理: 当在真正需要数据的时候,才真正执行数据加载操作. 目的: 延迟加载机制是为了避免一些无谓的性能开销而提出来的 实现延迟加载的几种方法 1. 让 js 最后加载 使用方法: 把 js 外部引入的文件放到页面底部 用途: 让 js 最后引入,从而加快页面加载速度 说明: 流览器之所以会采用同步模式,通常加载 js 文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后

  • Vue+webpack实现懒加载过程解析

    这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现方式: 1.webpack method require.ensure([''], callback, chunkName) ; 2.es6 motehod import() import().then() import(/* webpackChunkName: async-chunk-name */ /* webpackMode: l

  • webpack的懒加载和预加载详解

    webpack的懒加载和预加载详解

    目录 正常加载 懒加载 预加载 没有使用预加载 使用预加载 总结 正常加载 为了看的方便,index.js中的代码非常简单 console.log('index.js执行了') import { test } from './test.js' document.getElementById('btn-wrap').onclick = function () { test() } test.js console.log('test.js执行了') export function test() {

  • 解析javascript图片懒加载与预加载的分析总结

    本篇文章主要介绍了懒加载和预加载两种技术的解析,废话不多说,一起来看吧. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 懒加载的意义及实现方式有: 意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 实现方式:

  • JavaScript懒加载与预加载原理与实现详解

    目录 1.懒加载 1.1.什么是懒加载 1.2.为什么要使用懒加载 1.3.懒加载的优点 1.4.懒加载的原理 1.5.懒加载的实现步骤 1.6.懒加载的实现方式 2.预加载 2.1.什么是预加载 2.2.为什么要使用预加载 2.3.实现预加载的方法 1.懒加载 1.1.什么是懒加载 懒加载也可以叫做延迟加载,当访问一个页面的时候,先把img元素伙食其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样只需要请求一次,俗称占位图): 只有当图片出现在浏览器的可视区域内时,才这只图片真正

  • JS 加载性能Tree Shaking优化详解

    目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS

  • BootstrapTable加载按钮功能实例代码详解

    BootstrapTable加载按钮功能实例代码详解

    1      html <!--工具栏--> <div id="toolbar" class="btn-group"> <div style="float:left;margin-right: 10px"> <button class="btn btn-danger"onclick="openModal('add',0,'')">增加</button&g

  • Three.js加载外部模型的教程详解

    1.  首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 2.  创建three.js核心对象 Scene(场景) Camera(相机) Light(光源) Mesh(模型) Renderer(渲染器) 最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera) 3.  OBJ模型的导入 <script type=&quo

  • PyTorch加载自己的数据集实例详解

    数据预处理在解决深度学习问题的过程中,往往需要花费大量的时间和精力. 数据处理的质量对训练神经网络来说十分重要,良好的数据处理不仅会加速模型训练, 更会提高模型性能.为解决这一问题,PyTorch提供了几个高效便捷的工具, 以便使用者进行数据处理或增强等操作,同时可通过并行化加速数据加载. 数据集存放大致有以下两种方式: (1)所有数据集放在一个目录下,文件名上附有标签名,数据集存放格式如下: root/cat_dog/cat.01.jpg root/cat_dog/cat.02.jpg ...

  • Base64加解密的实现方式实例详解

    Base64加解密的实现方式实例详解 本实现方式基于JDK 1.8 实现: import java.util.Base64; import java.util.Base64.Decoder; import java.util.Base64.Encoder; public class Main { static String src = "hello,sahadev"; public static void main(String[] args) { // 获取加密对象 Encoder

  • OpenCV学习之图像加噪与滤波的实现详解

    目录 一.实验内容 二.实验环境和配置 三.实验原理及操作 1. 添加噪声 2.噪声二值化 3. 滤波处理 四.实验结果 2.椒盐噪声二值图与白噪声二值图 3.椒盐噪声处理图经处理后图像 4.白噪声处理图经处理后图像 五.结果分析 六.实验源码 一.实验内容 编写一Python程序,要求实现以下功能: 读入一幅图像. 使用两种以上的方法分别向图像中添加噪声. 输出一幅二值图像,图像中未加入噪声的区域为黑色,加入噪声的区域为白色. 使用三种滤波方法对上述添加了噪声的图像进行滤波处理. 输出滤波处理

  • react-router 重新加回跳转拦截功能详解

    目录 前言 事件经过 v6 之前的版本如何拦截 v6.7.0+ 如何拦截 吐槽 前言 路由的跳转拦截,在一些表单页中尤为常见.场景:用户输入了一些信息后但未提交,为了防止用户误点击某个跳转链接导致所填的表单信息丢失,跳转之前会弹出一个提示,如 “信息未提交,请确认是否离开” 等字样. 事件经过 在 react-router v6 之前有提供一个 <Prompt /> 组件来拦截路由的跳转.而在 v6 中却不支持此功能了!社区一片哀嚎,经查在 v6 实验阶段是有此功能的,但在 v6.0.0 be

随机推荐