关于产品上线

上线流程

上线

关于生产构建

生产构建步骤

把文件从js中抽取出来，形成单独的css文件，为什么要这样做呢？

这是head部分

之前写在模板里的css部分，看起来形成了很多个style。

css在渲染的时候，通常需要放在head部分，而JS的部分基本上是放在body里，如果把它放在一个文件里，会造成JS的启机会非常大，这是第一个点；第二个是CSS在JS中，等它下载完，这样就浪费了一个非常好的渲染时间，如果按照浏览器正常的渲染机制，应该是在head部分先渲染css，然后再请求JS，这中间有个时间差，这个时间差可以将页面渲染出来。
这种好处。

开启 sourceMap是用来定位压缩过后的文件是哪一行出现了问题。

在package.json

package.json里有一个build指令，用来开启生产环境代码的产出。

打包命令

平时我们开启预览是npm start。但是这里必须是npm run build，中间多了一个run，编译这个命令后多了一个dist目录，里面多了3个文件

dist目录

上线的时候主要是main.min.js和style.css。后端如果是jsp开发，html部分与jsp保持一致，如果是php开发，html部分与php保持一致，然后引入前两个js和css文件即可。
点开打包出来的index.html，这里的图片并没有出来，因为在引入图片的时候去掉了协议部分，是为了让图片的协议和文件协议保持一致，index.html用的是file协议，所以图片没有出来。

image.png

增加压缩文件的配置

webpack的中文文档，可以查看怎么配置。
https://webpack.docschina.org/guides/production/#

例如使用官方推荐的UglifyJSPlugin (点击可跳转)，

webpack.config.js
找准环境，添加进来：
对应添加
然后再执行一遍npm run build
PS: 官方写的是上述写法，也就是new UglifyJsPlugin，但是在用build编译的时候，好像会报错，最后百度改成了这样
重新添加
前面加了几个字段，然后就能编译了，js也被压缩了。
被压缩的js

---

然后用css-loader压缩一下css，同样去webpack.config.js中找一下css-loader

找准环境

找准环境，添加minimize!

添加进去
[ps: css-loader后面是?不是!]
然后再npm run build一下
此时css已经被压缩了

开启调试

也就是开启了sourceMap的功能。

增加sourceMap

然后再npm run build编译，完成之后，dist目录下增加了这几个文件。

dist目录增加了 已开启

上线的时候除去css和js, 那两个js.map和css.map文件也要上线。

---

发布部署

发布部署步骤

部署那步骤不属于前端的操作，一般是 运维或者后端。