webpack优化之preload和prefetch - 简书登录注册写文章首页下载APP会员IT技术webpack优化之preload和prefetchstrong9527关注赞赏支持webpack优化之preload和prefetchprefetch
<link rel="prefetch" ></link>
这段代码告诉浏览器，这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低。也就是说prefetch通常用于加速下一次导航，而不是本次的。
被标记为prefetch的资源，将会被浏览器在空闲时间加载。
preload
<link rel="preload" ></link>
preload通常用于本页面要用到的关键资源，包括关键js、字体、css文件。preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度。
webpack 搭配prefetch优化单页面应用code-splitting
单页面应用由于页面过多，可能会导致代码体积过大，从而使得首页打开速度过慢。所以切分代码，优化首屏打开速度尤为重要。
但是所有的技术手段都不是完美的。当我们切割代码后，首屏的js文件体积减少了好多。但是也有一个突出的问题：
那就是当跳转其他页面的时候，需要下载相应页面的js文件，这就导致体验极其不好，每一次点击访问新页面都要等待js文件下载，然后再去请求接口获取数据。频繁出现loading动画的体验真的不好
所以如果我们在进入首页后，在浏览器的空闲时间提前下好用户可能会点击页面的js文件，这样首屏的js文件大小得到了控制，而且再点击新页面的时候，相关的js文件已经下载好了，就不再会出现loading动画。
动态引入js文件，实现code-splitting，减少首屏打开时间
// 代码分割后的react组件
const Brand = asyncComponent(() => import(
/*webpackChunkName: 'mp-supports'*/
'./views/Brand'
))
// 路由引入
<Route path="/" component={App}>
<Route path="/brand" component={Brand} />
</Route>
首页组件的生命周期：
// 在接口取的数据后，进行prefetch
componentDidUpdate({ topics }) {
if( topics.length === 0 && this.props.topics.length > 0 ) {
// 实行prefetch，注意只有webpack 4版本才支持prefetch功能。
import(
/* webpackPrefetch: true */
/*webpackChunkName: 'topic'*/
"../topic"
关键点：
/webpackChunkName: 'chunk-name'/
componentDidUpdate
这里有两个关键点：
webpack的动态import()需要指定包命，如果不在注释中说明包名，那么用了几次import() , webpack就会给同一个文件打包多少次。使得我们prefetch的文件和路由中要用到的文件并不是同一个文件。
2.prefetch会在浏览器空闲时，下载相应文件。这是一个很笼统的定义，在我的使用中，我发现在接口没有返回数据，以及图片等还没有请求成功时，prefetch就会请求数据了。这一点是很不好的，最起码prefetch不能影响首页接口的获取速度。所以我把prefetch的执行事件放在了componentDidUpdate生命周期内。保障了prefetch的执行，不会影响到关键的首页数据获取。
当然prefetch在服务端渲染的页面并不会有影响接口的问题，是一个比较好的技术选择。
参考资料
Preload, Prefetch And Priorities in Chrome
Preload: What Is It Good For?
推荐阅读更多精彩内容【Hybrid开发高级系列】WebPack模块化专题1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...Kevin_Junbaozi阅读 6,152评论 0赞 16前端性能优化笔记随着前端页面的复杂化，网页的载入速度是越来越慢了，而最近的日子里面，Google 等公司也是在大力推动 PWA 的...azzgo阅读 692评论 0赞 2iOS工具和框架11、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...爱运动爱学习阅读 15,665评论 3赞 114关于高考的一些事至少到现在为止，这辈子做过最后悔的一件事就是没有参加高考。青春可能只有一次，那高三也只有一次，再想聚齐，那也是很难...哔一阅读 325评论 0赞 0和孩子们共同进步 籍山镇中心小学 陈丽华 前些天和宝爸宝妈们交流，我建议宝爸宝妈们要鼓励宝宝们多问。有疑就要问，有...粒粒橙clh阅读 262评论 0赞 3进来进来，我们对诗袖中风云常赠客， 唤取冥君对酒眠。（长亭） 对上对下皆可。苏长亭阅读 246评论 59赞 16SKD常见错误屏幕旋转相关 屏幕不旋转或点击相册崩溃 查看AppDelegate中是否设置如下方法: 如果发生旋转时崩溃 查看 ...大爷是高傲的喵阅读 744评论 0赞 0评论1赞1212赞13赞赞赏更多好文