查看 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 }
};
