2.6 KiB
前言
上线指导包括：
-
生产构建：合并、抽取、压缩、调试。
-
发布部署：提交、部署、开启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，推荐的插件是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 新功能。