前端如何做项目优化

148 阅读1分钟

Vue

  1. 循环绑定有效的Key,利于Diff算法对虚拟Dom做计算

  2. 路由动态加载 ()=>{import()}

  3. 避免使用运行时编译:降低Vue包带下的30%,在new Vue时不使用template

  4. 状态缓存使用computed计算属性

  5. 组件缓存 keep-alive

  6. 尝试使用Vue3.0,项目体积更小,运行更快

React

  1. 优化,shouldComponentUpdate内判断是否渲染

  2. 使用纯函数或者高性能组件 PureComponent

  3. 在constructor里bind函数作为事件处理函数,避免使用箭头函数

  4. 划分容器组件和视图组件

  5. 路由懒加载

  6. V16.8版本后创建组件可以使用Hooks

JS

  1. 事件处理:节流,防抖

  2. 降低页面加载时间

  3. 压缩合并css和js文件

  4. 减少请求,比如雪碧图

  5. 外部js和css放在文档最下面引入

  6. 减少回流和重绘,减少操作Dom

  7. 用canvas做图片压缩

CSS

  1. 屏蔽浏览器样式差异 使用common.css或reset.css

  2. 将常用的样式封装变量使用,减少代码;
  
  3. 字体等样式看情况可以放到父级,可以继承,减少子级重复定义;