1 项目目录结构

参考：Ant Design Pro https://pro.loacg.com/docs/getting-started

├── public
│   └── logo.png             # LOGO
|   └── index.html           # Vue 入口模板
├── src
│   ├── api                  # Api ajax 等
│   ├── assets               # 本地静态资源
│   ├── config               # 项目基础配置，包含路由，全局设置
│   ├── components           # 业务通用组件
│   ├── core                 # 项目引导, 全局配置初始化，依赖包引入等
│   ├── router               # Vue-Router
│   ├── store                # Vuex
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── views                # 业务页面入口和常用模板
│   ├── App.vue              # Vue 模板入口
│   └── main.js              # Vue 入口 JS
│   └── permission.js        # 路由守卫(路由权限控制)
├── tests                    # 测试工具
├── README.md
└── package.json

1.1 Vue的asset与public

参见 Vue Cli 的说明 https://cli.vuejs.org/zh/guide/html-and-static-assets.html#html

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。 注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。 public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。

1，assets文件夹就是用来放置经过webpack处理的资源的,好处可以参见上面 2，public的具体含义可以参照 https://cli.vuejs.org/zh/guide/html-and-static-assets.html#html

2 单页应用与首页白屏 SEO方案

2.1 首页白屏和SEO问题原因分析

单页面应用只有一个html，而页面里面的内容是需要依靠js来生成，这带来的一个问题就是当用户需要去访问该页面的时候，服务器返回来的是一个只有html骨架，没有实际内容的html。

当浏览器解析服务器返回来的html时，遇见你需要引入的js的时候就会单独发送请求去服务器上获取，获取得到js后就会解析执行，并生成页面所需要的html并插入到指定的节点。在获取js到执行js再到生成页面所需要的hmtl的这段时间里，服务器返回来的html是一直没有内容的，导致浏览器一直显示的是白屏。

所以，导致单页面首页白屏时间过长的原因主要有3个：

  • 一是网络的问题，在网络不好的情况下，获取文件的时间也对应这变长。
  • 二是文件大小的问题，项目越大型，文件的体积就越大，下载时间就越长。
  • 三是电脑本身的问题，性能越高的电脑，解析执行js的速度就越快，反之则慢。

2.2 解决方案

2.2.1 服务端渲染

使用node来实现ssr主要是node这门语言的基础就是基于js的，对js的亲和度高，实现起来比较简单。但是，现在很少公司或者项目会使用node做后台，主要还是因为node是单线程的问题，一旦某个环节出问题了，就会导致整个后台崩掉。一般node是用来做中间层的，只负责ssr和代理转发，不负责任何业务代码和逻辑。这意味着服务器的开销就变大了。所以单页面应用的ssr一般只是首屏做ssr，并不会所有页面都是用ssr，毕竟这是得不偿失的。

参考：淘宝2014年提出的中途岛计划 https://2014.jsconfchina.com/slides/herman-taobaoweb/index.html#/

2.2.2 骨架屏技术

骨架屏有点类似于手机app那些启动图，当数据还没有准备好的时候，显示的是骨架屏的东西，当数据准备好了之后就干掉骨架屏的内容，显示对应的数据。常见的骨架屏主要有图片背景图，css loading动画，还有就是占位块。

首先这里的图片背景图需要注意的是需要以base64的格式引入使用，如果使用链接的形式引入，html获取回来后又要发送请求去获取图片，这无疑是增加了首页白屏时间，而且图片的体积不能太大，不然会导致html文件体积变大，下载时间变长，这也是不可取的。所以这种图片背景图很少会使用在网页app中，大多数是使用在手机app中。

然后就是css loading 动画，这种做法见得少，一般都是直接来个全屏半透明遮罩层，在上面加个css loading动画，这种做法就是提示用户正在获取数据。

最后就是占位块，占位块就是根据不同页面的内容使用div进行占位，让用户看到占位块就知道页面大概会有什么内容，比如顶部有个500 * 200 的轮播图，我们就在顶部放置一个背景颜色是灰色，500 * 200的div。其他的页面组件也是如此，这样就组成我们的占位块了。饿了么外卖就是采用这种占位块的做法。

骨架屏的原理主要是根据浏览器的地址来显示对应地址的页面的占位块，隐藏其他页面的占位块。

==骨架屏技术是解决单页面首页白屏时间过长最有效的办法，成本低，实现起来容易。==

2.2.3 预渲染技术

预渲染主要是用来解决SEO不友好的问题，但是对于一些静态页面，或者数据变动不大页面，比如登录页面，注册页面等等，也是可以解决首页白屏时间过长的问题。

预渲染这种技术主要的是使用了爬虫技术，比如prerender-spa-plugin这个vue的预渲染插件，在打包的过程中，会用chrome浏览器打开所需要进行预渲染的页面，等待数据获取并渲染出来，然后利用爬虫，把页面的内容爬下来，在读写进文件里面，生成预渲染文件。然后后台利用nginx服务器进行代理转发，如果检测到是搜索引擎爬虫就返回生成的预渲染文件，如果是普通用户就返回正常html文件，这样就可以达到SEO的效果。

如果普通用户访问的是一些静态页面或者数据变动不大的页面，我们也可以直接返回生成的预渲染文件，这样既可以解决首页白屏时间过长的问题，又不影响用户的正常浏览和使用，但是这种方法解决首页白屏时间过长的问题有一点需要注意的是当js下载下来后并正常执行，这时候你可能会看见有短暂的闪烁，那是因为js会再次生成该页面的内容并覆盖掉预渲染生成的文件的内容，这样会造成内容从有到无再到有。所以我们需要在预渲染生成的html的根容器上加上data-server-rendered=“true”，让客户端 Vue 知道这部分 HTML 是由 Vue 在服务端渲染的，并且应该以激活模式进行挂载。

3. 扩展阅读

3.1 Native 方案

3.2 Electron

VScode 就是基于 Electron 开发的 参考： https://www.electronjs.org/

3.3 阿里巴巴与前端开源

3.4 全栈工程师是什么

全栈工程师可以在应用程序的后端和前端等应用程序开发过程中的任何一个环节工作。应用程序的后端包含逻辑处理、用户身份验证、数据库交互、服务器配置等。应用程序的前端是用户能看到和与之交互的部分。如果你想成为一名全栈工程师，你不必精通每一个细节。但是，在开发应用程序时，全栈工程师能够同时处理前端和后端，几乎对所有的技术细节都有涉猎。

参考链接：https://www.zhihu.com/question/22420900/answer/768545287 来源：知乎

3.5 JS的原型链

参考链接： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain