108 lines
2.6 KiB
Markdown
108 lines
2.6 KiB
Markdown
|
||
|
||
## 前言
|
||
|
||
上线指导包括：
|
||
|
||
- **生产构建**：合并、抽取、压缩、调试。
|
||
|
||
|
||
- **发布部署**：提交、部署、开启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 新功能。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|