nuxt解决首屏加载慢问题_一个 Node 脚本让你的前端项目加载速度飞起来

写在最前面

我的原创什么声明变成什么鬼了……

前言

随着前端三大框架的盛行，越来越多的前后端分离项目在服务器上跑了起来，随之而来，开发者也慢慢发现了这种开发模式所带来的弊端，其中之一就是首屏加载速度特别慢，因为虽然虚拟DOM 在更新视图方便比传统方式更加出色，但是首次加载静态资源时，我们的浏览器就需要花费更久的时间来处理这些Js了。

起因

从建立创建虚拟 dom 到render成真实的dom结构，肯定比传统方式肯定要慢一些。为此，加快首屏渲染速度，社区也推出了相应的服务端渲染方案，如基于 vue 的nuxt 和基于 react 的 next.js，并且有了一定的成效，可以说是开发层面目前能带来改善首屏加载的最佳方案了。抛开开发层面，为了解决这个首屏渲染与应用加载问题，为什么我们不让内存和带宽都很吃紧的服务器解放出来，把我们的静态资源丢在 OSS 上呢？今天我就来说一下这个解决方案的具体步骤。

什么是 OSS?

阿里云对象存储是这样介绍的

OSS,对象存储。海量、安全、低成本、高可靠的云存储服务，提供99.9999999999%的数据可靠性。使用RESTful API 可以在互联网任何位置存储和访问，容量和处理能力弹性扩展，多种存储类型供选择全面优化存储成本。

意思就是提供一个类似云盘的东西给你，而且访问的速度很快，你可以在里面储存你想要的任意文件和资源，同时提供了一套 API 给你，可以在项目的代码里面使用。

目前市场上比较知名我大概知道这几家 - 七牛云 - 腾讯云 - 阿里云 该选谁呢？他们价格不一致，提供的免费额度也不一致，具体选择什么，还要看自己的需要，我这里选择七牛云讲解。 为什么选择七牛云?因为免费>..<。 10G免费空间，10G免费流量，对于搭建自己的博客网站已经绰绰有余了。

七牛云对象存储

本章内容是将如何使用对象存储的API在前端项目如何使用，至于如何开通七牛云对象存储这些基础内容不在本章介绍范围内，如有需要去此链接查看：

教你从零开始申请和配置七牛云免费OSS对象存储（不能再详细了）_架构师小跟班-CSDN博客_腾讯云oss免费 七牛云 阿里云oss​

开通好了，我们就拿到了一些关键的信息，如AccessKey、SecretKey、存储空间名、访问地址、存储区域。 有了这些，我们再来看一下七牛云对象存储的提供

Node.js SDK_SDK_对象存储 - 七牛开发者中心​

我们这里主要是要用到文件上传功能，因此着重介绍上传文件的 API. 看一个最简单粗暴的用例，上传本地文件到远程，以表单方式

var

因此我们只要逐步遍历我们的需要上传的文件夹就好了。 直接给用例，看似很长，其实没多少逻辑，就是遍历需要上传的文件夹。 以一个 Nuxt 项目为例，需要上传的是客户端的静态资源，本地路径为.nuxt/dist/client。 文件结构如下：

因此，为了与打包的 publicpath 保持一致，上传路径为 img 时，应该改为 img/+文件名

const

使用 node 命令或者在每次build 之后上传都可，看项目需要。

我这里选择每次 build 之后上传。 对了，别忘了将你的打包资源路径换成你的 OSS的域名。

那就配置好了，现在我们开始运行一下。

它开始上传了! 我们来看一下加载速度。 大家自行体验吧.

品贤画室 | For Art,For U​

如果我的分享能给你带来收获的话，给我个反馈吧，感谢，共同进步吧。