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>
    )
  }
}
 

三.dns托管 图片什么的 能第三方服务器就第三方服务器托管