create-react-app按需加载以及部署

闲来无事,就想着把前几天折腾的问题重新梳理一遍,加深印象.
上面一篇文章有提到升级eject的cra项目.为什么升级这个项目,就是想要折腾,就是想要使用到webpack2,还有一个好处是加深对create-react-app的理解.坏处不言而喻,折腾浪费生命浪费时间.

按需加载

• AsyncComponent.js

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
    class AsyncComponent extends Component {
        constructor(props) {
            super(props);

            this.state = {
                component: null
            };
        }

        async componentDidMount() {
            const { default: component } = await importComponent();

            this.setState({
                component: component
            });
        }

        render() {
            const Component = this.state.component;

            return Component ? <Component {...this.props} /> : null;
        }
    }

    return AsyncComponent;
}

这个是异步加载组件的方法.到时在需要的组件上加入引用就好.例如在路由里.
- Menu.js

const AsyncUser = asyncComponent(() => import("./User"));
...
<Route path="/users" component={AsyncUser}/>

部署(nginx以及npm2)

• nginx

  • 准备工作

        npm run build

  • sudo vim /etc/nginx/sites-enabled/react-app.conf

      server {
          listen 7878;
          server_name 127.0.0.1;
          root /home/deploy/workspace/project/build;
          location / {
              try_files $uri /index.html;
              add_header   Cache-Control no-cache;
              #expires      1d;
          }
      }

  • 启用nginx配置

        sudo service nginx reload
        sudo service nginx restart

  • 注意
    如果是阿里云服务器,可能访问失败,阿里云的安全策略默认是只开启了80端口,首先去实例里检测其他的端口是否开放.

• pm2

  • installl and start

      sudo npm install pm2 -g
      pm2 start npm -- start

  • nginx

    
    # sudo vim /etc/nginx/sites-available/react-app.conf
    
    server{
          listen 80 default_server;
          server_name YOUR-SERVER-NAME;
          location / {
            proxy_pass http://localhost:3000; #or any port number here
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
          }
    }

  • restart

    sudo service nginx reload
    sudo service nginx restart

参考

• Code Splitting 参考