3.1 构建功能解决的问题---阅读笔记

构建

• 将源代码转换成浏览器可以执行的代码
• 浏览器对es规范的实现程度，css预编译器，mustache模版语法等造成浏览器不能执行源代码

grunt,webpack,gulp之前

• 前端的构建需要借助其他开发领域的工具，比如ant
• 专业构建js和css的工具需要特殊的语言执行环境，比如java
• grunt,webpack,gulp都是在node.js环境下执行的

构建要考虑的web应用问题

• 除了要考虑浏览器执行语言的问题，也要考虑web应用问题
• 开发阶段，模块化开发，每个模块都有独立的css，js，图片等文件
• 如果不做处理，每个文件独立上线的话，会增加客户端http请求的数量，影响用户体验

构建除转化语言的其他功能，主要是面向优化的

• 依赖打包：分析文件依赖关系，将同步依赖的文件打包在一起，减少http请求数量
• 资源嵌入：将小于64kb的图片编译为base64 格式嵌入文档，减少一次http请求
• 文件压缩：减少文件体积，缩少请求时间
• hash指纹：通过给文件名加入hash指纹，应对浏览器缓存策略。

构建后的改动

• html与js，css，图片等资源是引用和被引用的关系，构建后被引用的资源有以下改动
• 域名/路径改变，开发环境和线上环境的域名是不同的，不同类型的资源甚至会部署到不同类型的服务器上
• 文件名改变，构建后文件名被加上了hash指纹，内容的改变导致hash指纹的改变
• 以上改动会影响，html对被引用资源的url改变，所以对html的构建要注意被引用资源的url同步更新，这个功能叫做功能定位

构建需要面对的问题，3类

• 面向语言的
• 面向优化的
• 面向部署的