Webpack中的网页性能优化（Preloding/Prefetching）

最新推荐文章于 2022-03-15 18:06:50 发布

sanye丶

最新推荐文章于 2022-03-15 18:06:50 发布

阅读量198

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_42029374/article/details/105623496

版权

3 篇文章 0 订阅

订阅专栏

一般都会想到利用缓存来进行性能优化，既出来第一次加载模块的时候耗费性能，其它时候使用这个模块的时候，都使用第一次加载留下来的缓存，但其实利用缓存能优化的性能非常小。
但是一般来说，代码覆盖率高的页面的性能会更好，什么是代码覆盖率？既这个页面的js代码有用的代码除于页面加载的总代码得到的一个数值。在浏览器F12打开控制台，然后ctrl + shift + p，在弹出的输入框里输入Show Coverage，然后点击左边的录制按钮可以看到页面的代码覆盖率，入下图：

在当前页面的业务代码中，那些交互的逻辑代码，不应该先被加载出来，而是等需要用的的时候载加载，既在webpack中使用异步加载（import(‘某一个模块’)），来加载这些交互的逻辑代码。例如一些按钮点击触发的逻辑函数等等。但其实这样做的话（等页面需要了才加载），有可能会造成页面交互响应慢的缺点。如何解决他呢？那就是使用webpack中提供的Prefetching来预加载。例：

import(/* webpackPrefetch: true */'某一个模块')

说到Prefetching就不得不提Preloding，那么Preloding/Prefetching的区别是什么？Prefetching会利用线程空闲的时候来预加载我们的异步加载模块，既当前页面的代码模块加载完了，就加载配置了webpackPrefetch的模块。Preloding的话就是和没使用Prefetching一样，等需要这个模块的时候再加载这个模块。

关注