大家好，这里是修真院前端小课堂，今天给大家分享的是
《如何部署前端代码》
一。背景介绍
现在的项目一般都是前后端分离，前端的代码是单独部署在服务器上的，那么今天我们就简单的介绍一下部署代码的时候需要注意什么，如何才能让我们的网站性能得到优化
二。知识剖析
状态码：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 字符串的功能，直接使用这些成熟的工具就好。
七。参考文献
八。扩展思考
我们官网的发布线上环境的具体流程是怎样的，哪些地方可以改进？
Q: 能现场演示如何生成 hash 吗？
A: 能，webpack 就可以，演示后，只有文件发生更改的 hash 字符串才会变化
Q: 同一个文件在不同电脑上生成的 hash 是一样吗？
A: 由具体的配置决定，如果有把创建时间等信息也一起打包，那么会不一样。
Q: 我们公司代码有打包吗？
A: 没有，很粗暴，只使用了加版本号。
【更多内容，可以加入IT交流群565734203与大家一起讨论交流】
【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】