① 你们知道大公司里是怎样开发和部署前端代码的吗
开发时，把应用代码分支拉到本地，这些分支可以只包含你要修改的应用，也可包含你要引用的类库。在本地搭建webserver，修改host映射到本地。开发过程中要引用类库地址时直接引用线上地址，会被webserver中转到本地代码上。 发布时直接发布到对应机器上就行，代码里不用再修改线上路径。项目是你要做一件事建的项目，跟代码模块没关系。大公司前端代码一般会发布带cdn。看需要了，一般是php和java的， Nginxlighttpd apache都有用。当然是现有设计稿，至少你要先知道做什么，再写代码吧。自己写，如果某个函数忘记了或者样式调整不好可以参考网上的资料，模块当然自己写。开发时和部署时，类库的的引用和存放是看起来一致，但是背后其实不一样。天猫由于业务对模块的线上搭建的需求比较强烈，大部分场景下没法走本地打包，都用的存放在CDN的模块。
② 前端项目的开发流程
前端开发流程概述
前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段，下面分别进行叙述。
2.1 需求分析
这个环节中，首先是和客户进行交流，了解客户的需求，然后分析项目的可行性，撰写项目需求文档。如果项目可行，则起讨论具体方案，分模块分步骤进行规划，分析项目进度安排、所需成本，进行原型设计（包括页面布局图，页面逻辑流程图，说明文档等。通过原型设计，可以让项目组和客户都可以对项目有一个直观感受，同时可以低成本高效率的复现业务场景和各模块流程）。
可以说需求分析阶段是整个前端项目的基础，基础不牢，地动山摇。可以试想，如果和客户沟通不顺畅，有的方面客户没搞清楚是什么效果，开发完成后就可能与客户发生纠纷；如果可行性有问题，有的模块很难实现或成本超出预算，就很难处理。
2.2 开发阶段
这个环节是前端工程师主要参与的部分，按照需求分析阶段的规划按步骤完成任务。
根据产品需求分析文档和原型图进行UI设计，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。
根据UI设计进行规划，提取界面中可以复用的模块方便重复利用，分析界面是否有实现难度比较困难的地方，进行沟通和功能排期，按功能大小以及难度进行功能时间的评估，和后端沟通好排期时间，保证大家能够更有效地开发合作，针对功能复杂的地方要先理清思路。
不要盲目开发前端搭建框架。根据设计图进行前端界面开发，以及遇到的问题及时与产品、UI、后台人员沟通，保持大家信息一致，针对不清楚的地方也要及时沟通，以免做错功能。
根据后端接口进行字段填充，以及部分功能开发。针对缺少的字段或者数据结构进行提出，及时与后端反应，尽量让大家都能以最小的改动完成后续开发工作。前后端都要按照规范进行开发，针对不规范的地方要给与提出、指正，营造出规范的工作模式，以后维护成本和沟通成本更低以及开发效率更高。如果前端的设计进度远远超前后端的接口和数据结构设计，也不必等后端，可以自行开发nodejs服务器配合postman等接口软件进行开发。
前后端功能联调、完成自测。检查功能完成情况，看是否有遗漏，出现问题及时沟通解决。
2.3 测试阶段
发布测试、修改bug、发布上线，自测完成后提交测试，测试根据提交的项目以及需求进行测试，提出bug给相关人员修改，开发人员周期性的配合修改bug，保证今天能够修复昨天的bug。
发布dev环境，配合测试，修复bug以及需求优化
发布test环境，修复bug以及需求优化
发布it环境，修复bug以及需求优化
发布pre环境，修复bug以及需求优化
pre验收之后，发布线上环境，产品进行验收
2.4 维护阶段
如果客户验收通过，项目就进入了维护阶段，程序的维护包括程序上线后后续bug的修复和程序版本的更新。
3 个人经验总结
3.1 文档很重要
前端项目的文档似乎已经作为前端工程化的标准流程之一了，文档写的好，可以便于同事快速了解你的代码功能和需求，便于协作。可以想象，随之项目复杂度增加，体量越来越庞大，开发团队人数也越来越多。这种情况下，如果像变魔术一样隐匿中间流程而直接得出结果，后果可想而知：项目复杂度越增加就越难以管理，开发效率低，合作混乱，结果甚至导致项目死亡。
好的文档看起来就像一个产品说明书，但作用却远远超过了说明书，不仅仅告诉你如何使用，还应该告诉你项目的设计思路，用了哪些组件，哪些部分不完善，将来有什么规划等等。这是一份比较好的说明文档。
3.2 与客户及时沟通很重要
3.3 扎实的基本功很重要
尽管当下框架、函数库、工具包等更新迭代非常快，前端工程师有很多新的知识要学，但原生JS、HTML和CSS依然是重要的基本功，在学习前沿工具的同时不能放弃基本功的训练。
③ 怎么开发和部署前端代码
先部署页面，再部署资源：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。
先部署资源，再部署页面：在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。
- 总之，前端性能优化绝逼是一个工程问题！
好的，上面一坨分析想说的就是：先部署谁都不成！都会导致部署过程中发生页面错乱的问题。所以，访问量不大的项目，可以让研发同学苦逼一把，等到半夜偷偷上线，先上静态资源，再部署页面，看起来问题少一些。
但是，大公司超变态，没有这样的“绝对低峰期”，只有“相对低峰期”。So，为了稳定的服务，还得继续追求极致啊！
这个奇葩问题，起源于资源的 覆盖式发布，用 待发布资源 覆盖 已发布资源，就有这种问题。解决它也好办，就是实现 非覆盖式发布。
<img src="https://pic4.mg.com/50/_hd.jpg" data-rawwidth="631" data-rawheight="456" class="origin_image zh-lightbox-thumb" width="631" data-original="https://pic4.mg.com/_r.jpg">
好了，目前我们快速的学习了一下前端工程中关于静态资源缓存要面临的优化和部署问题，新的问题又来了：这™让工程师怎么写码啊！！！
要解释优化与工程的结合处理思路，又会扯出一堆有关模块化开发、资源加载、请求合并、前端框架等等的工程问题，以上只是开了个头，解决方案才是精髓，但要说的太多太多，有空再慢慢展开吧。或者大家可以去我的blog看其中的一些拆解：fouber/blog · GitHub
以上不是我YY的，可以观察 网络 或者 facebook 的页面以及静态资源源代码，查看它们的资源引用路径处理，以及网络请中静态资源的缓存控制部分。再次赞叹facebook的前端工程建设水平，跪舔了。
建议前端工程师多多关注前端工程领域，也许有人会觉得自己的产品很小，不用这么变态，但很有可能说不定某天你就需要做出这样的改变了。而且，如果我们能把事情做得更极致，为什么不去做呢？
另外，也不要觉得这些是运维或者后端工程师要解决的问题。如果由其他角色来解决，大家总是把自己不关心的问题丢给别人，那么前端工程师的开发过程将受到极大的限制，这种情况甚至在某些大公司都不少见！
④ 大公司里怎样开发和部署前端代码
虽然美团不是大公司，但在这里写一下我们的情况，仅供参考。开发时的和部署时类库的引用和存放是一致还是不同?开发环境和部署环境的类库代码都是相同的，但物理位置不同。部署环境的类库在CDN上，开发环境的类库在开发服务器上。模块放在项目中还是放在 CDN 之类服务器?模块放在项目中，部署时都在CDN上。渲染网页用 Nginx 还是其他动态语言的 Web 服务器?前面用ngnix做负载均衡，后面用apache做web服务器。制作网页的流程, 是现有设计师的稿, 还是先看模块?先有设计师的稿再写模块，但很多时候并不需要设计师，因为架子已经搭好了，界面规范和基础元素都有，一般的界面前端工程师都能搞得定。会选择用自己写的模块还是从社区寻找模块?基础框架用的YUI3，大部分二次开发的底层模块，还有和业务紧密结合的UI模块都是自己写的。当然也会用社区写的模块，比如上传组件、highcharts、Ace等。如果说怎么选择模块的话，那就是具体情况具体分析了，总体原则有两个：能不自己写，就不自己写；选择最符合需求的，一般来说，要么选最好的，要么选最快出结果的。
⑤ webpack打包后的代码，如何部署到服务器上
本文章前端代码是基于vue+webpack开发的
Nginx是一款轻量级的Web 服务器/反向代理服务器
首先，webpack配置如下
在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包
打包完成后，会发现项目中多了dist这个文件夹
执行结果和webpack的配置文件一致。
代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设：
Windows操作系统：windows server 2008 64位
Nginx服务：nginx-1.12.2 64位
1.下载nginx-1.12.2 64位解压，假设nginx-1.12.2放在D:nginx-1.12.2目录中，nginx目录结构。如图下
2、前端代码放在D:nginx-1.12.2html目录中，dist目录就是刚刚前端打包完的代码。如图下
3、在D:nginx-1.12.2conf目录中，有个nginx.conf配置文件，进行编辑这个文件
4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,
5、打开cmd控制台，进入目录D:nginx-1.12.2中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服务是否启动。
4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。
5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务
⑥ 如何将前端和后端结合
前端和后端结合的过程需要通过数扮接口来进行数据交互。
1.确定接口：前后端开发人员需要协商确定接口，包括接口的名称、参数、返回值等。在确定接口时，需要考虑数据的格式和传递方式，如JSON、XML等。
2.编写后端代码：后端开发人员需要根据接口的要求编写代码，实现接口的功能。后端代码需要根游橡据接口的参数进行相应的处理，并将处理结果返回给前端。
3.编写前端代码：前端开发人员需要根据接口的返回值进行相应的处理，将数据显示在前端页面上。前端代码需要通过Ajax、fetch等技术调用后端接口，并将返回的数据进行解析和处理。
4.测试接口：前后端开发人员需要对接口进行测试，确保数据的传递和处理没有薯磨灶问题。在测试过程中，需要对接口的各种情况进行测试，包括正常情况、异常情况等。
5.部署上线：当接口测试通过后，可以将前端和后端代码部署到服务器上线。在部署上线时，需要确保服务器环境的配置和安全性，以及代码的稳定性和性能。
⑦ 如何高效部署前端代码，如css，js
1.利用浏览器的304缓存，但是304叫协商缓存，还是需要与服务器通信一次
2.强制使用浏览器使用本地缓存（cache-control/expires），但是问题来了，不让浏览器发资源请求，资源怎么更新。
3.使用版本号，类似于a.css?v=1.0，b.css?v=1.0，做了更改的时候都变成a.css?v=2.0，b.css?v=2.0，有时候a.css改变了，b.css没有改变，不是多此一举吗？
4.使用数据摘要算法，类似于a.css?v=0abc23，b.css?v=65ao1j，如果a.css做了更改的话，a.css=v=1asd2j，b.css还是b.css?v=65ao1j。
5.很多企业，现在都静态文件cdn部署了，类似于http://static.cdn.com/css/a.css?v=0abc23，与页面分开部署了，
a.如果先部署页面，再部署资源：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。
b.如果先部署资源，再部署页面：
在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。
解决方法：改变命名方式，改成a_0abc23.css，上线的时候先部署静态资源，再部署页面。