做网站学,套模板网站,wordpress有哪些网站,php网站开发案例论文写在最前面我的原创什么声明变成什么鬼了……前言随着前端三大框架的盛行#xff0c;越来越多的前后端分离项目在服务器上跑了起来#xff0c;随之而来#xff0c;开发者也慢慢发现了这种开发模式所带来的弊端#xff0c;其中之一就是首屏加载速度特别慢#xff0c;因为虽…写在最前面我的原创什么声明变成什么鬼了……前言随着前端三大框架的盛行越来越多的前后端分离项目在服务器上跑了起来随之而来开发者也慢慢发现了这种开发模式所带来的弊端其中之一就是首屏加载速度特别慢因为虽然虚拟DOM 在更新视图方便比传统方式更加出色但是首次加载静态资源时我们的浏览器就需要花费更久的时间来处理这些Js了。起因从建立创建虚拟 dom 到render成真实的dom结构肯定比传统方式肯定要慢一些。为此加快首屏渲染速度社区也推出了相应的服务端渲染方案如基于 vue 的nuxt 和基于 react 的 next.js并且有了一定的成效可以说是开发层面目前能带来改善首屏加载的最佳方案了。抛开开发层面为了解决这个首屏渲染与应用加载问题为什么我们不让内存和带宽都很吃紧的服务器解放出来把我们的静态资源丢在 OSS 上呢今天我就来说一下这个解决方案的具体步骤。什么是 OSS?阿里云对象存储是这样介绍的OSS,对象存储。海量、安全、低成本、高可靠的云存储服务提供99.9999999999%的数据可靠性。使用RESTful API 可以在互联网任何位置存储和访问容量和处理能力弹性扩展多种存储类型供选择全面优化存储成本。 意思就是提供一个类似云盘的东西给你而且访问的速度很快你可以在里面储存你想要的任意文件和资源同时提供了一套 API 给你可以在项目的代码里面使用。目前市场上比较知名我大概知道这几家 - 七牛云 - 腾讯云 - 阿里云 该选谁呢他们价格不一致提供的免费额度也不一致具体选择什么还要看自己的需要我这里选择七牛云讲解。 为什么选择七牛云? 因为免费.. 。 10G免费空间10G免费流量对于搭建自己的博客网站已经绰绰有余了。七牛云对象存储本章内容是将如何使用对象存储的API在前端项目如何使用至于如何开通七牛云对象存储这些基础内容不在本章介绍范围内如有需要去此链接查看教你从零开始申请和配置七牛云免费OSS对象存储不能再详细了_架构师小跟班-CSDN博客_腾讯云oss免费 七牛云 阿里云ossblog.csdn.net开通好了我们就拿到了一些关键的信息如AccessKey、SecretKey、存储空间名、访问地址、存储区域。 有了这些我们再来看一下七牛云对象存储的提供Node.js SDK_SDK_对象存储 - 七牛开发者中心developer.qiniu.com我们这里主要是要用到文件上传功能因此着重介绍上传文件的 API. 看一个最简单粗暴的用例上传本地文件到远程以表单方式var 因此我们只要逐步遍历我们的需要上传的文件夹就好了。 直接给用例看似很长其实没多少逻辑就是遍历需要上传的文件夹。 以一个 Nuxt 项目为例需要上传的是客户端的静态资源本地路径为.nuxt/dist/client。 文件结构如下 因此为了与打包的 publicpath 保持一致上传路径为 img 时应该改为 img/文件名const 使用 node 命令或者在每次build 之后上传都可看项目需要。我这里选择每次 build 之后上传。 对了别忘了将你的打包资源路径换成你的 OSS的域名。 那就配置好了现在我们开始运行一下。 它开始上传了! 我们来看一下加载速度。 大家自行体验吧.品贤画室 | For Art,For Upinxianhs.com如果我的分享能给你带来收获的话给我个反馈吧感谢共同进步吧。
