1\ webpack中的配置:
一些插件:
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//css打包样式最小化,
配置:
entry入口处配置vendor,这样的话,就不会每个js都打共用插件进去,减少了js的体积.vendor.js中的内容基本上很少更新,并利用浏览器的缓存去提高应用程序的首屏加载速度
['react', 'react-dom', 'redux', 'react-redux', 'react-router', 'autoprefixer', 'add-dom-event-listener', 'axios'],
代码层面
1\减少 setInterval()对性能有影响:(setTimeout也有clearTimeout)
比如死循环,导致页面无响应 频繁的操作dom元素,使页面不断的repait或者reflow导致很大的资源消耗
在setInterval中不合理的使用闭包导致对象没有被回收等
clearInterval(time);
使用setTimeout代替setInterval
setTimeout(function(){
//do something
setTimeout(arguments.callee, time); //arguments.callee相当于这个函数本身.
}, time);
也可以用另一种形式:
function time(){
setTimeout(function(){
time();
}, 500);
}
2\shouldComponentUpdate(nextStates)
通过返回True或者false来确定是不是把改变的值放到render里渲染.以此可用来减少组件的不必要渲染,优化组件性能。
3\请求接口数据后渲染,放在componentDidUpdate 里面,不放在componentWillUpdate 里面
componentDidUpdate 之前已经执行render渲染出页面了,加快页面的流畅性.
react有算法,会对比 只渲染改变的部分.
**4\虚拟 dom **
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。