前端性能优化 about frontend-interview HOT 2 OPEN

项目中大多使用React + Webpack：

React

• {...this.props} 不要滥用，请只传递component需要的props
• props state 尽可能的简单，扁平化，props传的太多或者传得太深，都会加重shouldComponentUpdate里面的数据比较负担
• 多使用Functional Component （不需要使用组件的生命周期）和 PureComponent （与普通Component的区别在于重写了shouldComponentUpdate方法，会对state和props进行浅比较）
• 建议引入Immutable.js，可以配合shouldComponentUpdate方法，手动改变返回值
• ::this.handle 需要绑定this的方法，一律放在construtor里面，放在render里面每次渲染都会绑定一次
• 合理的组件拆分，避免一个组件过于庞大

Webpack

• 公共代码提取，webpack <= 3 版本可以使用CommonsChunkPlugin插件
• 代码分割（异步加载），webpack 2 可以使用require.ensure()，webpack 3可以使用() => import()

from frontend-interview.

补充：

webpack性能优化：https://juejin.im/post/5b652b036fb9a04fa01d616b

from frontend-interview.