前端星——前端工程化/性能优化

前端工程化

1. 指导原则
   规范化 / 模块化 / 组件化 / 自动化
2. 规范化
   • 版本管理（git）及开发流程规范
   • 编写规范（脚本/样式/目录结构）
3. 模块化
   • CSS模块化（通过样式生效规则来避免冲突）
     • DOM节点添加data-v-version属性
     • 以脚本模块来写样式，甚至有封装好的样式模块可直接调用
     • 优雅地使用BEM
     • 为元素建立shadow root，内部样式与外部样式完全隔离
   • JS模块化
     • Node.js

       require('http')
       module.exports = xx;	
       

     • Chrome

       // b.js
       import {M} from './a.js';
       // a.js
       export function M() {return 1;};
       

4. 组件化
   • 组件：由特定逻辑和UI进行地高内聚，低耦合的封装体
5. 自动化
   • 自动初始化：vue-cli
   • 自动构建（打包）：webpack
   • 自动测试：karma，jest
   • 自动部署：Jenkins

性能优化

1. 使用RAIL模型评估性能
   Response Animation Idle Load
2. 评估性能的工具
   Lighthouse、WebPageTest、Chrome DevTools
3. 实战