prefetch 和preload_Preload和Prefetch以及前端项目中的配置

1.vuecli3.x or 4.x默认打包之后，部署到服务器上的项目，会对静态资源的标签上默认加载preload或者prefetch属性，

啥是preload和prefetch呢？

Preload的设计初衷是为了让当前页面的关键资源尽早被发现和加载，从而提升首屏渲染性能。

Prefetch是为了提前加载下一个导航所需的资源，提升下一次导航的首屏渲染性能。但也可以用来在当前页面提前加载运行过程中所需的资源，加速响应。

2.项目当中默认打包后的代码部署到服务器上，首屏加载如下图：

请求数量和资源大小，以及dom渲染，页面渲染时间如下图：

打开dom面板，能看到一些静态资源文件被加上了proload和prefetch，

3.当在vue.config.js中webpack配置中做如下配置：

// vue.config.js

module.exports = {

chainWebpack: config => {

config.plugins.delete("preload")

config.plugins.delete("prefetch")

}

4.在打包部署服务器，清缓存访问一次项目首屏

静态资源中无preload和prefetch那写东西

紧接着，我们对两次加载数据进行一个对比：

未删除preload和prefetch 已删除preload和prefetch

637 requests 11 requests

3.6 MB transferred 1.4 MB transferred

4.3 MB resources 4.3 MB resources

Finish: 3.10 s Finish: 1.38 s

DOMContentLoaded: 1.27 s DOMContentLoaded: 705 ms

Load: 2.49 s Load: 1.29 s

preload和prefetch都是预加载的用法，通过对比得第二次时间较短。

一般是用不到这两个属性的，不过为了首屏加载速度快点，一般都会删除这两个配置。

prefetch 和preload_Preload和Prefetch以及前端项目中的配置相关推荐

axios 使用步骤很简单，首先在前端项目中，引入 axios：
2019独角兽企业重金招聘Python工程师标准>>> 前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources ...
前端项目中使用js-beautify格式化、美化js代码
前端项目中使用js-beautify格式化.美化js代码 1.js-beautify介绍很多网站的js,html,css代码做了混淆处理,导致难以阅读,这个时候js-beautify工具就可以派上用 ...
php项目前端src文件结构,前端项目中目录结构优化的方法总结
本篇文章给大家带来的内容是关于前端项目中目录结构优化的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 目录结构优化现在前端项目越来越变得像大型工程了,而且越来越复杂了,需要 ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】
表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...
前端项目中如何去除已经不再使用的图片资源
近期接手了一个前端项目,里面的图片资源文件很乱,看了下绝大多数都是2K以下的小图标,为了性能考虑图片准备做成雪碧图式.但是这个项目里面的图片比较混乱,存在着好几个版本,UI提供了最新的版本但是最新版 ...
前端项目中常用的轮子，提升开发效率
React UI组件库 1.Ant Design :文档齐全,社区生态良好,有手机版,还有PC版.可以用来快速创建手机/后台/内部应用的UI组件库.我的博客,就是那这个组件库制作的. 网址:https ...
前端项目中碰到的疑难杂症
1.路由跳转: vue项目中的router的hash方式和history方式的区别,this.router.push方法和this.router.push方法和this.router.push方法和t ...

prefetch 和preload_Preload和Prefetch以及前端项目中的配置

prefetch 和preload_Preload和Prefetch以及前端项目中的配置相关推荐

最新文章

热门文章