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

女爷i 2022-09-09 13:58 288阅读 0赞

**webpack系列文章：**

*  [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -]
 *  [【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验][Webpack _8_ - PWA]
 *  [【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载][Webpack _6_ - code splitting _ bundle]
 *  [【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！][Webpack _5_ - tree shaking]
 *  [【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存][Webpack _4_ - _ _bable]
 *  [【Webpack 性能优化系列(3) - oneOf】][Webpack _3_ - oneOf]
 *  [【Webpack 性能优化系列(2) - source-map】][Webpack _2_ - source-map]
 *  [【Webpack 性能优化系列(1) - HMR 热模块替换】][Webpack _1_ - HMR]
 *  [【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！][Webpack _css_css_html_js_js_eslint_js_babel]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]
 *  [【Webpack 简介及五个核心概念】][Webpack]

# 懒加载 #

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

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

**project**  
![在这里插入图片描述][aa50b21fa75e484dbbd7375ee40dccf8.png]  
**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));
    };

构建打开项目  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]  
**可以发现，还没有点击按钮，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));
      });
    };

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

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

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
点击按钮：**test.js文件才被加载**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 4]

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

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

# 预加载 #

**在声明 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));
      });
    };

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

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

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

# 参考 #

*  https://webpack.docschina.org/guides/lazy-loading/
 *  https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm\_id\_from=pageDriver

[Webpack _9_ -]: https://blog.csdn.net/weixin_45844049/article/details/120065367
[Webpack _8_ - PWA]: https://blog.csdn.net/weixin_45844049/article/details/120063411
[Webpack _6_ - code splitting _ bundle]: https://blog.csdn.net/weixin_45844049/article/details/120044485
[Webpack _5_ - tree shaking]: https://blog.csdn.net/weixin_45844049/article/details/120043245
[Webpack _4_ - _ _bable]: https://blog.csdn.net/weixin_45844049/article/details/120022585
[Webpack _3_ - oneOf]: https://blog.csdn.net/weixin_45844049/article/details/120008581
[Webpack _2_ - source-map]: https://blog.csdn.net/weixin_45844049/article/details/120002385
[Webpack _1_ - HMR]: https://blog.csdn.net/weixin_45844049/article/details/119982759
[Webpack _css_css_html_js_js_eslint_js_babel]: https://blog.csdn.net/weixin_45844049/article/details/119828504
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[Webpack]: https://blog.csdn.net/weixin_45844049/article/details/119452096
[aa50b21fa75e484dbbd7375ee40dccf8.png]: /images/20220829/b2bee91f4ad54afeb9aaabf7adcb014c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/56035c83c27f4ce1b729efdc3712e76d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/cb12fd706a0f4fed9c8e5f4ba9166070.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/95e2bfd3d76f4d4fab325c3327f46aec.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/a0012a0b09914716b5c0bde97165d8a2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/e61f6996d8ad4e7b85e8c4327a06e704.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/62b81acce1a64339a8d1075f62196251.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/fbb9dd293ea74d139f1fe9ffb99728ae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/31e264785d1d4ef9b54d9e437b5e1948.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/1353dc7c19724f5d992ab104a9e72009.png