简单说下webpack中关于Prefetching/Preloading的设置。
git仓库:webpack-demo
prefetching
和preloading
这两个是个啥子东西?preloading
:设置这个指令,就会在当前的页面中,以较高优先级预加载某个资源。其实就相当于浏览器的预加载,但是浏览器的预加载只会加载html中声明的资源,但是preloading
突破了这个限制,连css和js资源也可以预加载一波。Prefetching
:设置这个指令,就表示允许浏览器在后台(空闲时)获取将来可能用得到的资源,并且将他们存储在浏览器的缓存中。http
的缓存,然后下次再次请求的时候直接从缓存里面拿,这样就节省了加载的时间。footer.js
底部栏来说,只有当页面body点击的时候才挂载上来。import()
方法是es6
的动态加载模块方法,–>阮老师import讲解。import { createLogo } from "./logo"; import { createHeader } from "./header"; import { createContent } from "./content"; - import { createFooter } from "./footer"; createLogo(); createHeader(); createContent(); - createFooter() // 动态加载footer模块 + document.body.addEventListener("click", () => { + import("./footer.js").then(module => { + console.log(module); + module.createFooter(); + }); + });
import
引入footer
模块了,ok,打包看一下。0.bundle.js
就是footer.js
经过codeSpliting
代码分割以后所输出的文件,文件名什么的都能改,上章都有提及–>webpack从0到1-CodeSplitting代码分割。点击页面前 | 点击页面后 |
---|---|
Prefetching
,很简单:// 动态加载footer模块 document.body.addEventListener("click", () => { + import(/* webpackPrefetch: true */ "./footer.js").then(module => { console.log(module); module.createFooter(); }); });
0.bundle.js
,然后当我们点击页面动态加载的时候,就是直接走的缓存了。关于设置Preloading的就没有什么好说的了,其实也就是加一行代码,上面同样的位置设置为/* webpackPreload: true */
就行了。
两者的异同官网都有解释,中文文档也有,我就直接贴图了:
最后我们小结一下。
Preloading
什么时候用呢?比如说,你页面中的很多组件都用到了jQuery
,比较强依赖这个东西,那么我们就可以当import引入jQuery库的时候设置为Preloading
,让他预加载一波。Prefetching
我们一般用的比较多,也比较好理解,用官网的例子来说:一般当我们进入一个网站首页,只有当点击登录按钮的时候模态框才需要弹出来,那么我们就可以对这个login模态框
组件做下Prefetching
,当首页加载完毕,浏览器空闲的时候提前加载一下,这样当用户点击登录按钮就可以直接从缓存里面加载这个组件了。