前端组件化划分
1、面向运营，运营人员进行页面的创建、设计，组件类似乐高积木一样拼凑起来
2、面向设计，设计师直接将设计稿转成前端代码，比如阿里的 imgcook
3、面向开发，抽离页面的公共组件，提高代码复用性、质量和效率
组件化粒度划分
1、组件化，最小粒度，一个icon 或者一个button
2、模块化，从业务和功能的纵向进行划分，每一个模块既包括UI又包括业务逻辑，比如播放器组件播控播放控制和UI样式，分享组件包括分享功能和弹窗，支付组件包括支付流程和收银台支付结果页；
3、模板化，整个页面复用
设计理念
渐进式。先从组件化开始，逐步适应模块化，最终走向模板化
设计目标
1、代码复用，提升开发效率
根据业务特点，横向和纵向划分组件，以组件为单位承接业务需求。虽然以UI组件为主，但对于相对独立的功能，也进行了纵向的组件抽取。
2、组件独立开发维护，与各项目解耦
组件单独开发、调试、发布，供业务方调用，业务方只需专注业务本身。
3、更方便的组件调用，更合理的路由跳转
组件调用需明确输入、输出参数，并对参数进行校验并给出合理错误提示；当各项目引用业务组件 涉及到跳转时，组件库自动决定是项目内（前端路由）跳转还是项目外（location.href）跳转。
4、组件文档化，支持在线调试，降低组件使用门槛
组件库需要有完善的使用说明文档，支持在线调试，使业务方更加容易、便捷的使用。
组件划分
1、业务组件
- 页面组件：也叫路由组件，将页面当做微服务供其他项目引用
- 功能组件：完成某项业务功能，如播放器，图片预览
- 区块组件：独立的区块UI展示，如评论组件
- Card组件：由多个item组件组成，如轮播图，列表，表格
- item组件：业务组件最小单元
2、基础组件
- 基础UI组件：button，text，loading，toast
- 基础工具库：fetch，passport，storage
技术实现
1、设计原则： 单一职责、可配置、纯组件、高性能
2、构建工具
基础组件库是一组JS库，适合使用rollup构建，
UI组件库，使用Vue作为前端UI框架，使用webpack构建，支持业务组件按需加载
3、技术文档：基于storybook搭建UI组件的文档
4、发布/持续集成：业务组件通过jenkins工具统一发布
可能的问题和优化
组件支持按需加载就意味着，各组件入口需要单独打包，这会涉及到各入口的公共资源重复引用的问题。
我们可以
1、使用@babel/runtime，@babel/plugin-transform-runtime，设置 core-js 为 false，做大限度减小 babel 转换的包体。
2、使用 babel 命令打包 JS 文件（不使用 webpack），减小 JS 包体。
3、使用 webpack externals 将第三方依赖，以及每个组件的公共引用提出来，通过 require 的方式去引用，而不是重复打包到每个组件内。
总结
前端组件化可以很大程度上降低系统各个功能的耦合性，赋对前端工程化建设及代码维护成本的降低
