react项目 性能优化 首页优化 加载优化
2019-07-31 本文已影响0人
_一九九一_
react项目 性能优化 首页优化 懒加载 按需加载 要做哪些事情
一. nginx 开启 gzip, 在 nginx.conf 中添加以下配置 然后重启 nginx
server{
...
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
}
二. 使用react-loadable路由懒加载
- 代码进行分割,按需加载,将js 拆分成若干个chunk.js,按需加载,
import React from 'react';
import { HashRouter, Route, Switch,Redirect } from 'react-router-dom';
import Loadable from 'react-loadable';
import { connect } from 'react-redux';
import App from './App.js';
// 按路由拆分代码
const MyLoadingComponent = ({ isLoading, error }) => {
if (isLoading) {
return '加载中...'
}
else if (error) {
console.log(error)
return <div>页面出错了。。。</div>;
}
else {
return null;
}
}
const Login = Loadable({
loader: () => import('./pages/login'),
loading: MyLoadingComponent
})
class Routers extends React.Component {
render() {
return (
<HashRouter>
<App>
<Switch>
<Route path="/login" exact component={Login}></Route>
</Switch>
</App>
</HashRouter>
)
}
}