Vue和React项目中的优化

分析方法：

       浏览器（chrome）的性能，network显示时间与大小，内存可以看到该页面实时内存，webpack-bundle-analyzer插件分析大小。

具体实施：

个人认为项目优化分为两个层面一个是通用的webpack打包工具，另一个是具体框架\库方面。

1.webpack层面

Gzip压缩：compression-webpack-plugin 开启压缩，设置压缩开始大小和压缩比率。

SourceMap：生产环境配置sourceMap: false。

代码分割：webpack4之后自动引入split-chunk-plugin，分割代码按需加载。

项目分析：webpack-bundle-analyzer: 可视化打包插件，查看打包各个模块大小，做具体优化。

压缩：terser-webpack-plugin: 压缩js代码。optimize-css-assets-webpack-plugin: 压缩css代码。

缓存：按项目需求配置缓存，给文件名加hash值。

按需引入：webpack4之后版本内部支持Tree-shaking(ES6 import原理)，purgecss-webpack-plugin css树摇。

2.Vue框架

通用：路由懒加载，包按需加载、异步组件、拆分组件、压缩图片（svg、icon代替图片）、组件销毁时解除事件监听、防抖节流减少http请求、使用CND加速访问、减少div层级、对可能内存泄漏的全局变量、监听、不用的dom变量、闭包产生的变量等及时置为null。

• data中减少定义双向绑定变量（ref reactive同理）。
• v-for设定唯一key
• v-for和v-if同一元素连用问题：vue2中v-for优先级高。
• v-if和v-show的使用区别
• computed watch methods使用方式，computed有缓存但是快，其他两者每次调用会重新执行。
• 对仅仅展示不做修改的数据使用Object.freeze()包裹。可以接触双向绑定。
• keep-alive缓存常切换的组件
• 用css modules代替scoped

3.React库

除了上述通用方法，react库层面的有：

• 避免使用内联函数，使用箭头函数绑定事件
• 使用 React Fragments 避免额外标记
• 减少组件更新（props useState context redux改变），如果无状态组件使用PureComponent，useMeno类似于计算属性，useCallback缓存函数，memo(组件名，(oldProps,newPros) => false更新 true不更新)，useRef缓存数据。示例如下：

import { useState, memo, useCallback } from 'react'

// 子组件需要memo，并配合在父组件useCallback useMemo包裹子组件的props
const MyButton = memo(function MyButton(props) {
  console.log('有props组件更新了')
  return (
    <button onClick={() => props.handleAdd() }>
      I'm a button
    </button>
  );
})

//不含props的 也需要用memo包裹
const PureText = memo(() => {
  console.log('无props组件更新了')
  return (
    '纯文字'
  )
})

// 父组件
export default function MyApp() {
  const [data, setData] = useState(1)
  const handleAdd = useCallback(() => {
    setData(d => d+1) // 注意useCallback中调用useState需要函数式写法
  }, [])
  console.log('父组件更新了')
  return (
    <div>
      <h1>{data}</h1>
      <MyButton handleAdd={handleAdd} />
      <PureText />
    </div>
  );
}

• 渲染dom 用 && 代替 if else
• useEffect合理使用，不要不传第二个参数。