Webcourse/22-前端工程化/08-上线指导.md

## 前言

上线指导包括：

- **生产构建**：合并、抽取、压缩、调试。


- **发布部署**：提交、部署、开启gzip压缩、更新CDN。

下面来讲一下。

## 生产构建

生产构建包括：

- 合并：style、js

- 抽取：样式要从javaSCript中抽取出来

- 压缩：JS、CSS都要压缩。

- 调试：开启SourceMap。

下面分别讲一下。

### 1&2：合并和抽取

我们发现，首页引入了很多`<style>`节点，它们代表了不同的模块。我们需要把它们合并在一起，然后抽取成一个单独的css文件。

原因很简单：

- 浏览器会先渲染head部分，因此，css在渲染的时候，通常是放在head部分。

- js部分是放在body部分，如果css和js混在一起了，会导致，js的体积比较大。


编译出生产环境下的dist：

```
	npm run build
```


### 3、压缩

给生产环境的代码做压缩工作。

js压缩用webpack官网提到的[`Minification`](https://doc.webpack-china.org/guides/production/#minification)，推荐的插件是`UglifyJSPlugin`。

`UglifyJSPlugin`的指导链接：<https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin>

css压缩用css loader。


### 4、调试

如果要让线上的代码支持**线上调试**，就要开启`sourceMap`。

`sourceMap`的指导链接：<https://doc.webpack-china.org/guides/production/#source-map>


## 发布部署

发布部署包括：

- 提交

- 部署

- 开启gzip压缩

- 更新CDN

下面分别讲一下。


### 1、提交

使用Git提交代码，管理线上版本。

### 2、部署

php、java等服务器端从Git仓库拉去代码，依次部署到小流量、单机房、跨机房、全量部署。

流程是这样的：前端人员提交代码到Git仓库，后端或者运维人员负责部署代码。后端人员先把代码部署到小流量（一台机器上），供前端人员测试；如果没有问题，就开始部署单机房等等。

### 3、gzip压缩

gzip一般是服务器端在Ngix就配置好了，但是前端人员一定要检查确认一下 css 文件和 js文件有没有开启gzip压缩，避免服务器端人员把这个漏掉了。

### 4、更新CDN

CDN的更新有很多种方式。 方式一：一般情况下，CDN厂商会给业务方提供CDN更新的接口。方式二：有的情况下，会采用自动更新。不管是哪种方式，一定要检查线上的CDN的源代码是否更新了。

比如说，代码中修复了某个bug或者增加了新功能，如果某个地方的CDN没有更新，就会导致**那一片区域**的用户无法访问到你的新代码 or 新功能。