雨夜带刀

哪些场景需要 SSR 服务

现如今 Web 前端的主流 UI 框架都是 React 和 Vue，以及 Angular，这些框架主流的做法都是在客户端基于 JS 来完成 HTML 内容结构的渲染。对于一些 HTML 内容结构主要由动态数据构成的复杂页面，在性能表现一般的移动设备上渲染的计算就会显得有点吃力，那么此时如果有 SSR 服务在服务端完成 HTML 内容结构的渲染，可以显著提升渲染的性能。

当然还有页面需要做 SEO 的场景，不过这不是本文想要表述的范畴。

背景&概览

目前常见的图床服务都会有图片动态裁切的功能，主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片。

一张动辄以 MB 为计量单位的原始大图，通常不会只设置一下显示尺寸就直接输出到终端中，因为体积太大加载体验会很差，除了影响加载速度还会增加终端设备的内存占用。所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸，那么此时就需要根据图片 URL 来对原始图片进行裁切，然后动态生成并输出一张新的图片。

OPTIONS 方法比较少见，该方法用于请求服务器告知其支持哪些其他的功能和方法。通过 OPTIONS 方法，可以询问服务器具体支持哪些方法，或者服务器会使用什么样的方法来处理一些特殊资源。可以说这是一个探测性的方法，客户端通过该方法可以在不访问服务器上实际资源的情况下就知道处理该资源的最优方式。

既然比较少见，什么情况下会使用这个方法呢？

最近在做跨域文件上传的时候，浏览器会自动发起一个 OPTIONS 方法到服务器。

如果只是普通的 ajax 请求，也不会发起这个请求，只有当 ajax 请求绑定了 upload 的事件并且跨域的时候，就会自动发起这个请求。

在 前端自动化构建和发布系统设计（一）中主要介绍了使用 gulp 来构建，本篇将主要介绍发布部分。

URI 的设计规则

先来看一个完整的静态资源的 URI，http://a0.jmstatic.com/5d4f23234a51261e/common.css，这个 URI 由三部分组成，依次为 静态随机资源域名/文件 md5 值/原文件名 。

• 静态资源域名是随机生成的，这样可以在同一个站点中使用多个静态资源域名；
• 文件 md5 值是根据文件内容来生成的，这样能确保其唯一性；
• 原文件名有2个作用，作用1是可以从文件名看出在开发环境中对应的是哪一个文件，作用2下面再说；

前言

前端的业务逻辑和交互效果越来越复杂，代码量也随之越来越大，伴随着越来越大的代码量而来的还有代码的管理和部署的问题。模块化和预处理框架大行其道，新框架的出现让前端的开发环境越来越高大上了，但是部署到线上就越来越费劲了。在开发环境中模块化会将原本的大型应用分割成很多小模块，但是在上线的时候考虑到这些静态资源对 HTTP 请求数和请求体积的开销，很多小模块都需要合并然后再进行压缩。在 node.js 火起来之前，比较常见的处理工具有 ant，但是 ant 是基于 java 的，对于前端工程师来说使用起来很费劲。

grunt vs gulp

node.js 火起来之后，出现了很多用于处理前端静态资源的优秀模块，还有专门用于前端静态资源构建的框架，如鼎鼎大名的 grunt，但是 grunt 由于其基于配置的设计模式和构建模式基于文件的限制，对于复杂一点的构建逻辑配置起来就会比较繁琐。