上线流程
![](https://img.haomeiwen.com/i3865021/be144c3dc12cfc12.png)
关于生产构建
![](https://img.haomeiwen.com/i3865021/02accdd5e62c5d36.png)
把文件从js中抽取出来,形成单独的css文件,为什么要这样做呢?
![](https://img.haomeiwen.com/i3865021/240910476645c1f7.png)
之前写在模板里的css部分,看起来形成了很多个style。
css在渲染的时候,通常需要放在head部分,而JS的部分基本上是放在body里,如果把它放在一个文件里,会造成JS的启机会非常大,这是第一个点;第二个是CSS在JS中,等它下载完,这样就浪费了一个非常好的渲染时间,如果按照浏览器正常的渲染机制,应该是在head部分先渲染css,然后再请求JS,这中间有个时间差,这个时间差可以将页面渲染出来。
这种好处。
开启 sourceMap
是用来定位压缩过后的文件是哪一行出现了问题。
![](https://img.haomeiwen.com/i3865021/488cefad7d0778f7.png)
package.json里有一个build指令,用来开启生产环境代码的产出。
![](https://img.haomeiwen.com/i3865021/ef622c7597de9aa9.png)
平时我们开启预览是npm start。但是这里必须是npm run build,中间多了一个run,编译这个命令后多了一个dist目录,里面多了3个文件
![](https://img.haomeiwen.com/i3865021/b1e15c4497548572.png)
上线的时候主要是main.min.js和style.css。后端如果是jsp开发,html部分与jsp保持一致,如果是php开发,html部分与php保持一致,然后引入前两个js和css文件即可。
点开打包出来的index.html,这里的图片并没有出来,因为在引入图片的时候去掉了协议部分,是为了让图片的协议和文件协议保持一致,index.html用的是file协议,所以图片没有出来。
![](https://img.haomeiwen.com/i3865021/2ee69c8f642da0d3.png)
增加压缩文件的配置
webpack的中文文档,可以查看怎么配置。
https://webpack.docschina.org/guides/production/#
例如使用官方推荐的UglifyJSPlugin
(点击可跳转),
![](https://img.haomeiwen.com/i3865021/a16943adda1676b9.png)
找准环境,添加进来:
![](https://img.haomeiwen.com/i3865021/9ab3e78fe4d56971.png)
然后再执行一遍
npm run build
PS: 官方写的是上述写法,也就是new UglifyJsPlugin,但是在用build编译的时候,好像会报错,最后百度改成了这样
![](https://img.haomeiwen.com/i3865021/c3fbf5dd3d681f53.png)
前面加了几个字段,然后就能编译了,js也被压缩了。
![](https://img.haomeiwen.com/i3865021/1418daa3b1f7d23b.png)
然后用css-loader压缩一下css,同样去webpack.config.js中找一下css-loader
![](https://img.haomeiwen.com/i3865021/2fc595d61d6c2a59.png)
找准环境,添加minimize!
![](https://img.haomeiwen.com/i3865021/5875f26ad540ee09.png)
[ps: css-loader后面是?不是!]
然后再npm run build一下
![](https://img.haomeiwen.com/i3865021/3976bbadc6ea5334.png)
开启调试
也就是开启了sourceMap的功能。
![](https://img.haomeiwen.com/i3865021/4cead4b3cd681605.png)
然后再npm run build编译,完成之后,dist目录下增加了这几个文件。
![](https://img.haomeiwen.com/i3865021/c362ebbbee9197c7.png)
![](https://img.haomeiwen.com/i3865021/cb763a8992a45a28.png)
上线的时候除去css和js, 那两个js.map和css.map文件也要上线。
发布部署
![](https://img.haomeiwen.com/i3865021/0099201239d3ec24.png)
部署那步骤不属于前端的操作,一般是 运维或者后端。
网友评论