理解前端组件化、模块化、工程化 ​

组件化 ​

把重复的代码提取出来合并成为一个个组件，组件最重要的就是复用，其他功能都依赖于组件，可供不同功能使用，独立性强。

组件化更多关注UI部分，每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装。

简单来说组件化有几个优点：独立性、逻辑单一、复用性强、可维护性强、无副作用。

模块化 ​

分属同一功能/业务的代码进行分装，让它成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。

侧重功能的封装，主要是针对Js代码，隔离、组织复制的js代码，将它封装成一个个具有特定功能的的模块。模块可以通过传递参数的不同修改这个功能的的相关配置，每个模块都是一个单独的作用域，根据需要调用。一个模块的实现可以依赖其它模块。

以vuex中的module来就可以很容易理解，在实际开发中会将不同的逻辑处理接口按模块来分类，最后再统一引入使用。模块之间几乎没有关联，大大的提升的实际开发中的可维护性。

JS 模块

工程化 ​

前端工程化不是具体的某项技术和方法，只要我们引入的方法、技术方案、工具可以提升开发效率、提高前端应用质量，那么都属于前端工程化。前端工程化就是通过一系列的工具、方法、工程化的思维，将成千上万个模块、组件或其他静态资源进行有序、规范、标准化、可控、可追踪的组织起来，作为一个整体运行，以便提高前端工程的性能、稳定性、可用性、可维护性等。

现在流行的微前端就是很好的例子。将多个独立的工程集合到一个app中，它们各自独立互不影响，可以自己进行部署维护。