preload with_webpack打包普通项目

preload with_webpack打包普通项目preload与prefetch的区别 preload是一个声明式fetch,可以强制浏览器在不阻塞document的onload事件的情况下请求资源

preload

preload 与prefetch 的区别

  • preload 是一个声明式 fetch,可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源

    preload 顾名思义就是一种预加载的方式,它通过声明向浏览器声明一个需要提交加载的资源,当资源真正被使用的时候立即执行,就无需等待网络的消耗。

  • prefetch 告诉浏览器这个资源将来可能需要,但是什么时间加载这个资源是由浏览器来决定的。

    若能预测到用户的行为,比如懒加载,点击到其它页面等则相当于提前预加载了需要的资源。

使用方法:

通过 Link 标签进行创建:

在 HTTP 响应头中加上 preload 字段:

Link: ; rel=preload; as=style

这种方式比通过 Link 方式加载资源方式更快,请求在返回还没到解析页面的时候就已经开始预加载资源了

prefetch 预判加载与preload 使用方法是一样的

和的缓存行为

当资源被 preload 或者 prefetch 后,会从网络堆栈传输到 HTTP 缓存并进入渲染器的内存缓存。 如果资源可以被缓存(例如,存在有效的 cache-control 和 max-age),它将存储在 HTTP 缓存中,可用于当前和未来的会话。 如果资源不可缓存,则不会将其存储在 HTTP 缓存中。 相反,它会被缓存到内存缓存中并保持不变直到它被使用。

副作用

正确使用 preload/prefetch 不会造成二次下载,也就说:当页面上使用到这个资源时候 preload 资源还没下载完,这时候不会造成二次下载,会等待第一次下载并执行脚本。

对于 preload 来说,一旦页面关闭了,它就会立即停止 preload 获取资源,而对于 prefetch 资源,即使页面关闭,prefetch 发起的请求仍会进行不会中断

preload 和 prefetch 的优先级、

preload 用 “as” 或者用 “type” 属性来表示他们请求资源的优先级(比如说 preload 使用 as=”style” 属性将获得最高的优先级)。没有 “as” 属性的将被看作异步请求,“Early”意味着在所有未被预加载的图片请求之前被请求(“late”意味着之后)

例如,preload as =“style”将获得最高优先级,而as =“script”将获得低优先级或中优先级。 这些资源也遵循相同的CSP策略(例如脚本受 script-src 约束)。

下面是在 Blink 内核的 Chrome 46 及更高版本中不同资源的加载优先级情况著作权归作者所有。

从图中可以看出:(以 Blink 为例)

  1. HTML/CSS 资源,其优先级是最高的

  2. font 字体资源,优先级分别为 Highest/High

  3. 图片资源,如果出现在视口中,则优先级为 High,否则为 Low

而 script 脚本资源就比较特殊,优先级不一,脚本根据它们在文件中的位置是否异步、延迟或阻塞获得不同的优先级:

  1. 网络在第一个图片资源之前阻塞的脚本在网络优先级中是 High

  2. 网络在第一个图片资源之后阻塞的脚本在网络优先级中是 Medium

  3. 异步/延迟/插入的脚本(无论在什么位置)在网络优先级中是 Low

当页面 preload 已经在 Service Worker 缓存及 HTTP 缓存中的资源时会发生什么?

这各情况来说是比较少的,但通常来说,会是比较好的情况 —— 如果资源没有超出 HTTP 缓存时间或者 Service Worker 没有主动重新发起请求,那么浏览器就不会再去请求这个资源了。

如果资源在 HTTP 缓存中(在SW缓存和网络之间),那么 preload 会从相同的资源中获得缓存命中。

使用 preload 或 prefetch,可能会浪费用户的带宽,特别是在资源没有缓存的情况下

没有用到的 preload 资源在 Chrome 的 console 里会在 onload 事件 3s 后发生警告。

webpack优化之preload和prefetch

单页面应用由于页面过多,可能会导致代码体积过大,从而使得首页打开速度过慢。所以切分代码,优化首屏打开速度尤为重要

但是所有的技术手段都不是完美的。当我们切割代码后,首屏的js文件体积减少了好多。但是也有一个突出的问题:

那就是当跳转其他页面的时候,需要下载相应页面的js文件,这就导致体验极其不好,每一次点击访问新页面都要等待js文件下载,然后再去请求接口获取数据。频繁出现loading动画的体验真的不好

所以如果我们在进入首页后,在浏览器的空闲时间提前下好用户可能会点击页面的js文件,这样首屏的js文件大小得到了控制,而且再点击新页面的时候,相关的js文件已经下载好了,就不再会出现loading动画。

动态引入js文件,实现code-splitting,减少首屏打开时间

按引入情况加载,只需添加注释即可

  • 代码分割注释:/*webpackChunkName: ‘mp-supports’*/

  • prefetch注释:/* webpackPrefetch: true */

更多的,可以查看 webpack 注释黑魔法:Module Methods | webpack

使用案例

const { default: lodash } = await import(/* webpackChunkName: "lodash" */ /* webpackPrefetch: true */ 'lodash');
// Multiple possible targets
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

原来还可以叠罗汉的

react项目

// 代码分割后的react组件
const Demo = asyncComponent(() => import(
 /*webpackChunkName: 'mp-supports'*/
  './views/Brand'
))

// 路由引入

    
 

首页组件的生命周期:

/ 在接口取的数据后,进行prefetch
componentDidUpdate({ topics }) {
  if( topics.length === 0 && this.props.topics.length > 0 ) {
   // 实行prefetch,注意只有webpack 4版本才支持prefetch功能。
    import(
        /* webpackPrefetch: true */
        /*webpackChunkName: 'topic'*/
        "../topic"
      )
  }
}

参考文章:

3 Code Splitting Patterns For VueJS and Webpack https://medium.com/js-dojo/3-code-splitting-patterns-for-vuejs-and-webpack-b8fff1ea0ba4

使用 Proload/Prefetch 优化你的应用 使用 Proload/Prefetch 优化你的应用 · Issue #17 · happylindz/blog · GitHub

Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 javascript – Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 – 终身学习者 – SegmentFault 思否

webpack 中,webpackPrefetch、webpackPreload 和 webpackChunkName 的区别是什么? https://www.cnblogs.com/skychx/p/webpack-webpackChunkName-webpackPreload-webpackPreload.html

转载本站文章《Preload与Prefetch的区别以及webpack项目中如何优化》,
请注明出处:Preload与Prefetch的区别以及webpack项目中如何优化 – html5 – 周陆军的个人网站

今天的文章preload with_webpack打包普通项目分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/84733.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注