痛点分析

1. 我们想使用最新的 ECMAScript 规范进行开发，但是受限于浏览器实现不理想，上线前需要使用特殊工具转译为浏览器支持的语法。
2. 我们受够了 CSS 的弱编程能力，想使用 LESS/SASS 等预编译语法或者 PostCSS 自动处理 hack。但浏览器不支持，上线前需要使用特殊工具进行编译转换。
3. 本地开发环境下静态资源的引用 URL 都是本地相对地址，上线前要修改为真实的 URL 。手动修改非常繁琐，需要借助工具完成。这种功能通常被称为资源定位。
4. 考虑产品的性能，上线前需要将 JS、CSS、图片等资源进行压缩，需要使用 CSS Sprites，甚至需要将小体积图片通过 base64 格式内嵌，这些都需要借助于工具实现。
5. 模块化开发能够提高 Web 产品的性能和源代码的维护效率，散列的模块在上线前需要进行依赖分析与合并打包，需要借助于工具实现。
6. 编写 JavaScript 逻辑代码时如果需要与数据接口交互，则依赖于服务器端 接口 API 的完成进度。
7. 静态文件（JS、CSS、图片等）与动态文件（HTML 模板）仍然存在于同一项目中，所以前端工程师产出的文件仍然需要服务器端工程师进行部署。

开发层面

• ES 规范与浏览器兼容性不一致
• CSS 的弱编程能力
• 资源定位
• 图片压缩/base64 内嵌/CSS Sprites
• 模块依赖分析和压缩打包

协作层面

• JavaScript 部分逻辑依赖接口 API

部署层面

• 部分资源需要借助后端工程师部署

摘自：《前端工程化 体系设计与实践》周俊鹏