前端工程化 ​

前端工程化主要关注：

1. 开发阶段
2. 打包阶段
3. 发布阶段
4. 渲染阶段

前端优化 ​

前端优化主要是为提高 打包速度、发布速度 和 渲染速度，资源越小传输越快、代码越优执行越快。

开发阶段优化 ​

• 不写重复代码，提取公共模块（为打包阶段优化做铺垫）
• 选择合适的第三方库，避免引入无用代码（为打包阶段优化做铺垫）
• 提高编程水平，避免内存泄漏（为渲染阶段优化做铺垫）
• 拆分主副功能，异步懒加载模块（为渲染阶段优化做铺垫）
• 多媒体资源压缩，做响应式适配（为渲染阶段优化做铺垫）
• 使用合适的数据结构和算法提高执行效率（为渲染阶段优化做铺垫）
• 使用高性能动画和 DOM 操作，避免页面回流和重绘（为渲染阶段优化做铺垫）

打包阶段优化 ​

• 增量构建支持，减小非首次构建的源码大小。
• 提取免打包代码(第三方库)，减小源码大小。
• 模块拆分，避免模块代码重复构建。
• 配置按需加载模块，减少无用代码。

发布阶段 ​

• 规范流程
• 持续集成
• 容灾备份

渲染阶段优化 ​

• 合理使用缓存
• 合理安排资源的加载顺序
• 预先解析、预先加载、预先渲染
• 懒加载、懒执行、懒销毁