前端项目发展的四个阶段：
1、库/框架
库：jQuery
框架：vue、React、Angularjs
2、构建优化
选择Gulp, Grunt, Webpack 等构建工具，对代码进行压缩、校验，再以页面为单位进行简单的资源合并。
3、JavaScript和CSS模块化开发
分而治之是软件工程中的重要思想，模块化是目前前端最流行的分治手段。模块化开发的最大价值不是复用，而应该是分治。
1) JavaScript模块化开发：
JavaScript模块化开发的方案有很多，包括：
① AMD规范：用于客户端，RequireJS实现；
② CommonJS规范：用于服务端，Browserify实现；
③ ES6 Module：export和import实现。
2) CSS模块化开发：
CSS模块化开发是在LESS、SASS、Stylus等预处理器的@import导入、@mixin混入特性支持下实现的。
注意：模块化中的模块一般指JavaScript模块。
4、组件化开发与资源管理
1) 组件化开发
组件化开发的最大价值在于复用。
① 页面上的每个独立的可视/可交互区域视为一个组件；
② 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
③ 由于组件具有独立性，因此组件与组件之间可以自由组合；
④ 页面只不过是组件的容器，负责组合组件形成功能完整的界面；
⑤ 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。
前端项目的几个开发概念：
|
概念 |
说明 |
实例 |
|
JS模块 |
独立的算法和数据单元 |
浏览器环境检测，网络请求Ajax，应用配置，DOM操作，工具函数及组件里的JS单元 |
|
CSS模块 |
独立的功能性样式单元 |
栅格系统，字体图标，动画样式及组件里的CSS单元 |
|
UI组件 |
独立的可视/可交互功能单元。一个组件一个目录，资源就近维护；组件可组合；组件的JS可依赖其他JS模块， 组件的CSS可依赖其他CSS单元 |
页头，页尾，导航栏，搜索框 |
|
页面 |
UI组件的容器，由UI组件组成 |
首页，列表页，用户管理 |
|
应用 |
整个项目或整个站点称为应用，由多个页面组成 |
|
前端项目的目录结构示例：
组件与模块的异同与联系：
① 相同点：
都是基于功能划分的单位。
② 不同点：
组件，偏向发行的概念，强调复用，作为可以被第三方客户使用的独立工具，组件一般都有独立的封装。
模块，偏向设计的概念，强调分治，一般指JavaScript模块，但也包括CSS模块等，用于在项目中划分相对独立的功能，封装时可以和其他模块混合，发行时可以多个模块合并后一起发行。
③ 联系：
组件与模块没有上下级的包含关系，模块可以引用多个组件，组件也通常由多个模块实现。也就是说，将页面分成一个个组件，各组件互不干扰，分别开发，可随意组合，组件包括HTML(<template>)、CSS(<style>)、JS代码(<script>)，而它的script可以由多个模块组成，JS模块利用命名空间、闭包等方式将想要暴露的属性暴露出来，或使用AMD、CMD、ES6 Module等方式，而CSS模块利用LESS、SASS、Stylus等预处理器的@import导入、@mixin混入特性实现。
说到这里，似乎联想到了架构、框架、模式、模块、组件、插件、控件、中间件等相关概念，它们的含义与区别请见：
2) 静态资源管理
① 资源加载策略
无论访问哪个页面都能按需加载页面所需资源，没访问过的无需加载，访问过的可以缓存复用。
② 增量加载（增量更新）
在需要更新资源的时候，不需要重新加载所有资源，只需要加载变化的资源（新增的资源），然后合并到当前资源上。
③ 前端优化
l 加载相关的策略：按需加载、延迟加载、预加载、请求合并；
l 缓存相关的方案：缓存利用，缓存更新、缓存共享、非覆盖式发布。
前端高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。
④ 静态资源管理系统 = 一个通用的资源表生成工具 + 基于表的资源加载框架
l 资源表：一份数据文件，如JSON，是项目中所有静态资源（主要是JS和CSS）的构建信息记录，通过构建工具扫描项目源码生成，是一种key-value结构的数据，以每个资源的id为key。
l 资源加载框架：提供一些资源引用的API，让开发者根据id来引用资源，替代静态的script/link标签来收集、去重、按需加载资源。调用这些接口时，框架通过查表来查找资源的各项信息，并递归查找其依赖的资源信息，可以在此过程中实现各种性能优化算法来智能地加载资源。