【Webpack 性能优化系列(7) - 懒加载和预加载】

最新推荐文章于 2023-08-21 17:37:01 发布

置顶圆圆01

最新推荐文章于 2023-08-21 17:37:01 发布

阅读量2.4k

点赞数 1

分类专栏： Webpack 文章标签： webpack 前端构建工具懒加载和预加载

本文链接：https://blog.csdn.net/weixin_45844049/article/details/120048999

版权

Webpack 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

webpack系列文章：

懒加载

懒加载或者按需加载，会在文件需要使用时才加载，是一种很好的优化网页或应用的方式。

懒加载的使用加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

project
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <h1>hello lazy loading</h1>
  <button id="btn">按钮</button>
</body>

</html>

test.js

console.log('test.js文件被加载了~');

export function mul(x, y) {
  return x * y;
}

export function count(x, y) {
  return x - y;
}

index.js

console.log('index.js文件被加载了~');

import { mul } from './test';

document.getElementById('btn').onclick = function() {
    console.log(mul(4, 5));
};

构建打开项目
在这里插入图片描述
可以发现，还没有点击按钮，test.js文件就已经加载了，这是没有做懒加载的效果

现在对test.js文件做懒加载：点击按钮的时候才加载test.js文件资源

懒加载其实就是用到了code splitting文章中动态导入的方法

懒加载写法：

index.js

console.log('index.js文件被加载了~');

// import { mul } from './test';

document.getElementById('btn').onclick = function() {
  // 懒加载~：当文件需要使用时才加载~
  import(/* webpackChunkName: 'test'*/'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};

构建结果：
在这里插入图片描述
现在的构建结果还有一个test，表示已经做了代码分割，因为前面已经讲到了，懒加载其实就是用到了code splitting文章中动态导入的方法

所以懒加载内部实现的前提条件就是先进行代码分割，先分割成单独的js文件，再对这个单独的js文件进行懒加载

打开项目：可以明显的看到，一开始这个test.js文件并没有加载
在这里插入图片描述

在这里插入图片描述
点击按钮：test.js文件才被加载

在这里插入图片描述
这里有一个问题，重复点击按钮会重复加载资源吗？

不会，资源第一次加载后，第二次及后续就会直接读取缓存，而不会重复加载资源

预加载

在声明 import 时，使用webapck的内置指令/* webpackPrefetch: true */就可以对指定资源进行预加载

index.js

console.log('index.js文件被加载了~');

// import { mul } from './test';

document.getElementById('btn').onclick = function() {
  // 预加载 prefetch：会在使用之前，提前加载js文件 
  // 正常加载可以认为是并行加载（同一时间加载多个文件）  
  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};

构建结果：
在这里插入图片描述
可以发现test.js资源用到了prefetch技术，即预加载

打开页面看到test.js已经被加载好了，
在这里插入图片描述
点击按钮的时候，读取的其实是缓存

加载方式的对比

正常加载：可以认为是并行加载（同一时间加载多个文件）
懒加载：当文件需要使用时才加载~
预加载 prefetch：会在使用之前，提前加载js文件
等其他资源加载完毕，浏览器空闲了，再偷偷加载资源

参考

https://webpack.docschina.org/guides/lazy-loading/
https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver

圆圆01

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【Webpack 性能优化系列(7) - 懒加载和预加载】

懒加载或者按需加载，会在文件需要使用时才加载，是一种很好的优化网页或应用的方式。懒加载的使用加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。预加载 prefetch：会在使用之前，提前加载js文件，等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
复制链接

扫一扫

专栏目录