2024年Web前端最新VUE 爬坑之旅 -- 引入静态资源的正确方式,知乎上转疯了

前端框架

前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。

以 Vue 为例,我整理了如下的面试题。

Vue部分截图

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

然而在今天,我的这个做法被人实力打脸了,,,

最近入职了新公司,这二天在查看新公司项目代码,发现他们的各种资源文件都是放在 static 下面的,我就去问了,为什么不把资源放在 assets 里面,人家告诉我的理由如下:

将资源放到 static 里面是为了缓存的需要,放在 static 里面的文件,浏览器会自动为其设置缓存逻辑,在初次请求获取到资源以后,后续再请求相同的资源就会按照浏览器的默认缓存策略来处理,比如说如果资源没有更新,那么就会返回 304,浏览器会直接从缓存里面拿这个资源,减少了请求,这也算是项目的一个优化点。

如果是把资源放到 assets 里面,虽然会被压缩,但是每次请求的时候都会直接向服务器获取新的资源文件,这其实是一个很大的资源浪费,所以在打包体积和重复请求数的权衡上面,我们选择了后者。

通过这件事,我学到了不少,所以记录下来。

另外,关于缓存相关的知识,可以看下面这篇文章 ,讲的非常清楚https://zhuanlan.zhihu.com/p/44789005
这里需要纠正下,看了上面的那篇文章之后,我对前端缓存有了新的理解,所以上面用删除线划掉的那段话是有问题的,正确的应该是:
我们项目中放在 assets 中的图片文件在打包的时候会被压缩成 base64 格式的文件,这个文件在请求过之后会被放到 memory cache 中,当后面再次请求这个资源的时候就会从内存中直接读取,不会再发出请求,这个可以从浏览器的调试模式中看到,所以官方给出的图片资源的存放位置并没有问题,将项目中用到的小图标等文件放到 assets 下,不仅会帮我们压缩文件,还可以减少请求数,这正是我们所需要的。
vue-cli项目 build后请求本地static文件中的 json数据,路径不对,报错404处理方法
解决访问static目录下文件找不到的问题( 报404 ?)

文末

逆水行舟不进则退,所以大家要有危机意识。

同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

  • 19
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值