前端工程化的的理解，浅谈web工程化的开发流程
一个完整的前端工程体系应该包括：统一的开发规范；组件化开发；构建流程。开发规范和组件化开发面向的开发阶段，宗旨是提高团队协作能力，提高开发效率并降低维护成本。
1. 什么是前端工程化
2. 前端工程化面临的问题
-
提高开发生产效率；
-
降低维护难度。
-
制定开发规范，提高团队协作能力；
-
分治。软件工程中有个很重要的概念叫做模块化开发其中心思想就是分治。
-
代码审查；
-
压缩打包；
-
增量更新；
-
单元测试；
2.1 开发规范
2.2 模块/组件化开发
2.2.1 模块还是组件？
2.2.2 模块/组件化开发的必要性
-
Web应用的组件化开发；
-
前端组件化开发实践;
-
大规模的前端组件化与模块化。
3. 构建&编译
3.1 构建在前端工程中的角色
3.2 资源管理要做什么？
3.2.1 静态资源构建策略
-
es6/7规范的文件；
-
less/sass等文件（具体看团队技术选型）；
-
[可选]独立的小图标，在构建阶段使用工具处理成spirit图片。
-
es6/7转译，比如babel；
-
将less/sass编译成css；
-
spirit图片生成；
-
依赖打包。分析文件依赖关系，将同步依赖的的文件打包在一起，减少http请求数量；
-
资源嵌入。比如小于10KB的图片编译为base64格式嵌入文档，减少一次http请求；
-
文件压缩。减小文件体积；
-
hash指纹。通过给文件名加入hash指纹，以应对浏览器缓存引起的静态资源更新问题；
-
代码审查。避免上线文件的低级错误；
-
文件监听。配合动态构建、浏览器自动刷新等功能，提高开发效率；
-
mock server。并非所有前端团队都是大前端（事实上很少团队是大前端），即使在大前端体系下，mock server的存在也是很有必要的；
3.2.2 模板的构建策略
-
url改变。开发环境与线上环境的url肯定是不同的，不同类型的资源甚至根据项目的CDN策略放在不同的服务器上；
-
文件名改变。静态资源经过构建之后，文件名被加上hash指纹，内容的改动导致hash指纹的改变。
3.2.3 小结
-
预编译，包括es6/7语法转译、css预编译器处理、spirit图片生成；
-
依赖打包；
-
资源嵌入；
-
文件压缩；
-
hash指纹；
-
代码审查；
-
模板构建。
-
文件监听，动态编译；
-
mock server。
4. 总结
-
统一的开发规范；
-
组件化开发；
-
构建流程。
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
