前端工程化系列好文摘要

前端工程化遇到的好文在这里简要摘记一下核心要点和主要概念，这里核心是指针对本人而言不表明原文核心阐述，方便快速查阅，详细解释仍是要看原文

对于前端工程化我本身还没造成知识体系，先简单罗列知识点，若是哪一天忽然开窍就把这些用本身的思路和理解贯穿起来

1、Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

原文连接：http://www.cnblogs.com/ihardcoder/p/5623411.html

要点：介绍Webpack的hash指纹相关内容，核心要点在hash、chunkhash、contenthash三者之间的区别

一、hash：

简单说，hash是项目级的hash

hash是由compilation对象计算所得

compilation对象表明某个版本的资源对应的编译进程。每次检测到项目文件有改动就会建立一个compilation

也就是说项目中任何文件修改都会引发compilation对象的变化，从而使hash值改变

二、chunkhash

简单说，chunkhash是文件级的hash

chunkhash是根据具体模块文件的内容计算所得的hash值

也就是说某个文件的改动只会影响它自己的hash指纹，不会影响其余文件

三、contenthash

简单说，contenthash的做用在于使js与css指纹hash计算解耦

webpack默认将js/style文件通通编译到一个js文件中，这样就使得chunkhash配置编译的结果是js和css文件的hash指纹彻底相同。不管是单独修改了js代码仍是style代码，编译输出的js/css文件都会打上全新的相同的hash指纹。这种情况下咱们不能将css单独编译输出而且打上hash指纹，也就没法有效的进行版本管理和部署上线。

可是，能够借助extract-text-webpack-plugin将style文件单独编译输出，extract-text-webpack-plugin提供了contenthash。contenthash表明的是文本文件内容的hash值，也就是只有style文件的hash值

 

2、组件化、模块化相关文章

Web应用的组件化开发：http://blog.jobbole.com/56161/

前端组件化开发实践：http://web.jobbole.com/82689/

大规模的前端组件化与模块化：http://www.infoq.com/cn/news/2014/04/front-end-modular

 

3、大公司里怎样开发和部署前端代码？

原文连接：https://github.com/fouber/blog/issues/6

要点：大公司变态级前端性能优化演进

一、html+css无编译

　　问题：css每次都要请求，状态码200

二、本地缓存：200->304

　　　　问题：304协商缓存，还会与服务端通讯一次

三、强制本地缓存（cache-control/expires），不通讯

　　　　问题：资源变动缓存如何更新

四、修改引用资源路径：路径+版本

　　　　问题：一个文件变动，全部缓存失效

五、使用数据摘要算法，版本精确到文件级

　　　　问题：静态资源与动态网页分集群部署

六、静态资源CDN部署

　　　　问题：更新时，先部署网页，仍是静态资源？

七、用文件的摘要信息来对资源文件进行重命名，使用新文件非覆盖式发布，先部署静态资源再灰度部署页面

 

总体策略：

1. 配置超长时间的本地缓存 —— 节省带宽，提升性能

2. 采用内容摘要做为缓存更新依据 —— 精确的缓存控制

3. 静态资源CDN部署 —— 优化网络请求

4. 更资源发布路径实现非覆盖式发布 —— 平滑升级

 

注意：

　　静态资源的缓存控制要求在前端全部静态资源加载的位置都要作这样的处理

　　包括js、css文件以及其中引用的资源路径

　　因为涉及到摘要信息，引用资源的摘要信息也会引发引用文件自己的内容改变，从而造成级联的摘要变化

　　大概示意图以下

 

4、前端工程--基础篇

 原文连接：https://github.com/fouber/blog/issues/10

要点：前端工程建设的四个阶段

一、前三阶段

第一阶段：库/框架选型

技术选型，减小工程量

第二阶段：简单构建优化

在开发阶段后，为提升运行性能（运行效率）而作：压缩、校验、资源合并...

第三阶段：js/css模块化开发

分而治之，提升维护效率

二、第四阶段：组件化开发与资源管理

　　大幅提高开发效率，兼顾运行性能

　　2.1 组件化

组件化核心：

• 独立的可视/可交互区域
• 组件须要的资源就近在同一个项目目录下
• 组件之间相互独立（不耦合），可随意组合
• 页面只是组件的容器
• 不须要或替换组件时，能够整个目录删除/替换

组件化好处

• 功能被分治，开发者之间没有时序的依赖，提高并行开发效率
• 容许随时加入新成员认领组件开发或维护工做
• 支持多个团队共同协做

前端项目开发概念划分

名称	说明	举例
JS模块	独立的算法和数据单元	浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，DOM操做(dom)，工具函数(utils)，以及组件里的JS单元
CSS模块	独立的功能性样式单元	栅格系统(grid)，字体图标(icon-fonts)，动画样式(animate)，以及组件里的CSS单元
UI组件	独立的可视/可交互功能单元	页头(header)，页尾(footer)，导航栏(nav)，搜索框(search)
页面	前端这种GUI软件的界面状态，是UI组件的容器	首页(index)，列表页(list)，用户管理(user)
应用	整个项目或整个站点被称之为应用，由多个页面组成

 

前端项目结构（可知道指导项目目录结构）

• web应用由页面组成

• 页面由组件构成

 

• 一个组件由一个目录，资源就近管理

• 组件可组合
• 组件的JS可依赖其余JS模块
• CSS可依赖其余CSS单元

 

2.2 资源管理

未完待续...