转载自字节架构前端

先上灵魂拷问

在文章之前，先抛一些灵魂拷问：

• 前端代码从 tsx/jsx 到部署上线被用户访问，中间大致会经历哪些过程？
• 上述过程中分别都有哪些考虑、指标和优化点，以满足复杂的业务需求？
• 可能大部分同学都知道强缓存/协商缓存，那前端各种产物（HTML、JS、CSS、IMAGES 等）应该用什么缓存策略？以及为什么？
  • 若使用协商缓存，但静态资源却不频繁更新，如何避免协商过程的请求浪费？
  • 若使用强缓存，那静态资源如何更新？

• 配套的，前端静态资源应该如何组织？
• 配套的，自动化构建 & 部署过程如何与 CDN 结合？
• 如何避免前端上线，影响未刷新页面的用户？
• 刚上线的版本发现有阻塞性 bug，如何做到秒级回滚，而非再次部署等 20 分钟甚至更久？
• 如何实现一个预发环境，除了前端资源外都是线上环境，将变量控制前端环境内？
• 部署环节如何方便配套做 AB 测试等？
• 如何实现一套前端代码，发布成多套环境产物？
• 如何实现按 feature 发布产物供用户使用，并逐步扩大 feature 灰度，将影响减到最小（即线上同时存在多 feature 产物）？
• CDN 域名突然挂了，如何实现秒级 CDN 降级修补而非再次全部业务重新部署一次？

本文将会带着这些问题，试着一起探索在2021年，系统化的前端部署解决方案。

PS：本篇关于静态资源组织的问题&思路等，借鉴自知乎大佬张云龙这篇回答 大公司里怎样开发和部署前端代码

本篇文档只阐述简单的 nginx 配置 尽量以解决问题为主，不涉及原理性内容

nginx 是常用的服务器，其功能包括但不限于以下内容

• 负载均衡
• 代理（包括正向反向）
• TCP 转发
• 控制 http 缓存

TCP 转发不在本文的讲解之列，如确实想知道，请咨询后端。

Sentry 监控服务接入主要分为以下几个步骤，请务必阅读仔细。

创建项目

登录Sentry控制台，在对应组织下点击创建项目

选择对应语言，我们一般是 Vue。

CI/CD之容器化

自古以来，程序猿最头痛的事情就是环境配置，有相当一部分的程序，只能运行在特定环境上，比如sketch只支持Mac。那么我怎么做到别的环境也能运行这个程序？并且原封不动的保证功能完好？答案大概只有容器化。

容器化，大体上指将服务，代码等运行在一个容器中，也可以理解为一个沙箱。在前端服务越发复杂的今天，容器化的推进将直接关乎前端发布部署的体验以及后续维护成本的高低。

容器化有不少技术，包括虚拟机，Docker等等。

在 Docker 技术成熟的今天，容器化大部分都是由 Docker 体系为基础构建。什么是Docker?，可以提供参考。

背景

filter 这个函数，相信大家都不会陌生，他是 es2015 新增的数组的方法，用以过滤。它接受一个函数，返回符合函数条件的数组，如果没有，则返回空数组。

语法如下

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

各个参数的具体含义如下（来源于 MDN）

callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
element
数组中当前正在处理的元素。
index 可选
正在处理的元素在数组中的索引。
array 可选
调用了 filter 的数组本身。
thisArg 可选
执行 callback 时，用于 this

Hexo

什么是 Hexo？

Hexo 一个基于 Node.js 的静态博客写作工具（大致可以这么理解），轻量，方便，高逼格是其最大的优点。它的主要特点就是将我们书写的 markdown 文档转化为页面，然后可以由我们自由部署到个人的服务器，或者 Github Page。

Hexo 使用

Hexo 具体如何使用，网络上有很多文章，这边也不一一列举。推荐一下mutoe写的博客。

使用 GitHub Pages 和 Hexo 搭建自己的静态博客

Hexo 更换主题

当我们照着mutoe的文章初始化之后，并且通过 hexo server 运行本地服务之后，就会发现 Hexo 的默认主题，很古老，有点呆板。作为前端 + 强迫症，我并不能接受这种主题，好在 Hexo 给我们提供了更换主题的功能（这也是我觉得 Hexo 最 Nice 的地方!）。

axios

axios 是目前前端常用的 HTTP 请求框架，地位几乎等同于几年前的 jQuery 的 ajax。为什么 axios 现在这么多人使用，笔者看来大概是因为一下几个方面

• 前端模块化的大势所趋
• axios 很多强大的功能特性
• Promise 的普及

个人认为以上三点是最主要的原因，下面切入正题，本文将对笔者在实际开发中关于 axios 的 Interceptors 和 CancelToken 做一个简单的阐述。

Interceptors 拦截器

axios 的 Interceptors(拦截器，以下统称拦截器)，应该说是 axios 最为强大的功能之一，尽管 jQuery 的 ajax 也可以使用拦截器（jQuery 中 ajax 的 beforeSend 方法），但是它只能对单个请求进行拦截，无法做到统一配置。

前端开发是本着代码简短强悍（lazy）为目标的，因此能够统一配置拦截器的 axios 自然受到了开发者的追捧。

拦截器分为两种，分别是 request 拦截器和 response 拦截器，顾名思义，分别作用于一个 http 请求的 request 阶段（之前）和 response 阶段（拿回响应进行回调之前）。

前端代码规范细则

本细则分为强制和非强制内容，欢迎提出 issue

强制

• 强制使用eslint

• 函数注释强制使用jsDoc注释，即 /** 开头的注释格式

• 代码结尾一律不得加;，此项可以由prettier格式化工具自动实现

• 字符串一律使用单引号''，多行字符串一律使用模板字符串

var a = `adf
dasd
888
`

前端开发流程规范

本规范处于试行阶段，欢迎提出 issue

本流程规范暂定下列三个规范，涵盖方方面面。如有异议，可以提出修改意见。集思广益，方得始终。

流程规范

流程规范主要指开发流程的规范，此规范需要配合前端、后端、设计、产品、测试、运维等必要环节，分为开发前规范和开发阶段规范两个部分。

开发前规范

开发前首先应当十分确定产品需求、服务人群、开发周期、开发模式等一系列要素，其中产品需求、服务人群应当由产品、运维等进行把控，新产品开发前必须进行产品研讨会，相关人员应当到场（前端、后端、设计、产品、测试、运维等必要环节相关人员），进行产品论证，论证通过则产品应当书写产品文档，包含设计文档，开发规划等相关信息，交由领导审核，通过进入下一步，不通过打回研讨，直至通过。

开发前流程走完之后，进入开发阶段规范

自定义 element-ui 表格滚动条插件

前言

此文原发表于本人 CSDN，此文为 2019.08.07 最新迁移与修订。

elemtent-ui 是基于 vue2.0 开发的优秀的 前端 UI 组件库，它秉着 简洁，快速，效率的原则，大大的方便了网站开发人员，减少了开发人员大量的书写组件时间。

但是 element-ui 中的部分组件，并不能满足所有的开发（产品 ）需求，比如 element-ui 中的 表格组件(el-table)，其表格组件功能很强大，但是当表格超出定义宽度之后出现的横向滚动条（浏览器默认滚动条）会影响整体页面美观，如下图