前端工程化、模块化、组件化

一、前端工程化是一种思维而不是技术。

是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化。在其过程中，一般会涉及到构建工具、模块化、组件化、自动化和持续集成。其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。

二、模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。优点：避免变量污染，命名冲突；提高代码复用率； 提高维护性；依赖关系的管理。像vue3、lodash-es（不要用lodash）。

三、组件化是一种将页面结构和行为进行拆分，是对UI的拆分。这样更利于维护和重用代码。

①页面上的每个独立的、可视/可交互区域视为一个组件;
②每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;
③由于组件具有独立性,因此组件与组件之间可以 自由组合;
④页面只不过是组件的容器,负责组合组件形成功能完整的界面;
⑤当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

组件化将页面看作为一个容器,页面上各个独立部分（头部、导航、焦点图、侧边栏、底部）等视为独立组件,不同的页面根据内容的需要,去放相关组件就可组成完整的页面。
 

四、自动化指的是自动化工具了，包括自动化部署、自动化测试等等

1.举个例子当项目在使用一些项目使用 ES6代替Javascript，或者scss语法 的时候，我们往往需要写完后在执行这些对应语法转换指令例如：

（1）执行编译命令：xx.scss->xx.css

（2）执行压缩丑化命令：xx.js->xx.min.js 如果文件代码被修改，那么上面两条命令就要再执行一遍。

同样的，也会有用Less写CSS，用Jade写HTML， 用webpack/Browserify模块化、为非覆盖式部署的资源加MD5戳等等。自动化构建工具就是用来帮助我们 完成这些重复而机械的工作的

2.'NPM Scripts' 是实现自动化构建工作流的最简方式,有时候开发阶段会在package.json文件里面， 使用scripts字段定义脚本命令，通过指令来执行scss 或者模板工具，压缩工具的指令，但是存在 问题'对于相对复杂的构建过程就显得非常吃力'

3.常见的自动化构建工具Grunt、Gulp以及FIS

     3.1.'Grunt'由于它的工作过程是基于临时文件去实现的，所以它的构建速度会相对比较慢， 且处理的环节越多，文件的读写次数越多。因此对于超大型项目，文件会非常多，它的构建速度 就会非常慢

    3.2.'Gulp' 很好的解决了 Grunt 中构建速度慢的问题，因为它是基于内存去实现的，也就是说它对于 文件的处理环节都是在内存当中完成的，相对于磁盘读写速度自然就快了很多。另外它支持同时去执行 多个任务，效率大大提高，且使用方式相比于 Grunt 更加直观易懂，插件生态同样非常完善，应该算是目 前市面上最流行的前端构建系统了。

     3.3.FIS 是百度的前端团队推出的一款构建系统它把我们在项目中一些典型的需求尽可能地都集成在内部了

4.可以通过这些自动化构建工具完成类似scss 或者模板工具，压缩工具的指令统一管理和执行顺序