如何部署前端代码

大家好，我是IT修真院武汉分院第五期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网js任务13，深度思考中的知识点-如何部署前端代码

一.背景介绍

现在的项目一般都是前后端分离，前端的代码是单独部署在服务器上的，那么今天我们就简单的介绍一下部署代码的时候需要注意什么，如何才能让我们的网站性能得到优化

二.知识剖析

状态码：304与200

304与200这两个状态码在缓存这些知识点中经常被提到，关于他们与缓存的具体关系可以查看《强制缓存与协商缓存》这个小课堂，这里只做一个简单的介绍。

304:重定向，告诉用户请求的文件被转移到了别处。

200:代表请求已成功被服务器接收、理解、并接受。

区别在于304发送了一次http请求，但是200没有。

用户是如何访问页面的

将文件放到服务器，等待用户访问。用户发出http请求，服务器将对应的文件发给用户，并返回状态码200.但是这样，每次用户访问页面都要发送请求，这样很影响性带宽。所以我们希望最好利用304，让浏览器使用本地缓存。但304叫协商缓存，还是要和服务器通信一次，我们的目标是减少http请求

如何避免304请求

强制浏览器使用本地缓存（cache-control/expires），不要和服务器通信。那问题来了：当我们需要更新文件的时候怎么办？很好，相信有人想到了办法：通过更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源。比如像官网项目中就是采用的这种方法，比如对于index.html文件，我们会在这个文件名后面加上版本号：index.html?ver=53.下次上线，把链接地址改成新的版本，资源就会更新了。

三.常见问题

还能进一步优化吗？

四.解决方案

当我们使用上面提到的版本号的方式更新文件的时候会带来另外一个问题，可能这次版本更新我只更新了一个css文件，但是所有文件的版本号都发生了变化，所有的文件都需要重新下载，那么能不能只更新发生了变化的文件呢？答案是可以的，我们可以使用哈希算法对文件求摘要信息，哈希算法会根据文件内容生成一段随机的哈希字符串，当文件更改后，生成的哈希字符串也不会相同，所以我们可以使用哈希字符串代替版本号

五.编码实战

六.扩展思考

如何根据文件生成HASH字符串？

gulp和webpack都有提供这个生成hash字符串的功能，直接使用这些成熟的工具就好。

七.参考文献

参考：大公司里怎样开发和部署前端代码

八.扩展思考

我们官网的发布线上环境的具体流程是怎样的，哪些地方可以改进？

视频链接：

如何部署前端代码_腾讯视频

ppt链接：

Q:能现场演示如何生成hash吗？

A:能，webpack就可以，演示后，只有文件发生更改的hash字符串才会变化

Q:同一个文件在不同电脑上生成的hash是一样吗？

A:由具体的配置决定，如果有把创建时间等信息也一起打包，那么会不一样。

Q:我们公司代码有打包吗？

A:没有，很粗暴，只使用了加版本号。

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：83020780，或者你可以直接点击此链接：http://www.jnshu.com/login/1/83020780