性能优化

  • 查看 loader 合和 plugin 的处理速度：speed-measure-webpack-plugin

  • 查看 webpack 打包之后的大小：webpack analysis

  • webpack dll：将全局需要使用的依赖提前打包，使用 DLLPlugin 和 DllReferencePlugin

  • split chunk：使多次打包的文件，只打包一次

  • react profiler：highLight render

  • 使用 react hooks 尽量差分组件粒度，减少子组件的渲染

  • profmance：火焰，自上而下，哪个函数耗时

  • audit：网站分数

  • network：瀑布图

  • components：$r.hooks

  • Function component：React.memo 与 useMemo：

React.memo 包裹整个组件
useMemo 可以只包裹 render() 函数
useMemo 更细粒度的优化渲染

  • Function component：Props 的默认值：
 const Child = ({ type }) => {
  useEffect(() => {
    console.log("type", type);
  }, [type]);

  return <div>Child</div>;
};

Child.defaultProps = {
  type: { a: 1 }
};
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容