React 项目优化

Unsafe 生命周期

强迫症，就没办法了

componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate

cd your_project
npx react-codemod rename-unsafe-lifecycles

 frontend // 第一个命令时
 javascript with flow

antd UI组件 按需引用

官网地址： 链接

React 路由异步加载

插件

yarn add react-loadable -S

loadableComponent.js

import React from 'react'
import Loadable from 'react-loadable'

const Loading = (props) => {
  const { error } = props
  if (error) {
    return (
      <div>
        <p>{error.stack ? error.stack : ''}</p>
      </div>
    )
  }
  return <div />
}


const loadableComponent = (loader, render) => {
  const config = {
    loader,
    loading: Loading,
    delay: 1000,
  }
  if (render) {
    config.render = render
  }
  return Loadable(config)
}

export default loadableComponent

路由模块.jsx

import lc from '../../utils/loadableComponent'

const Home = ()=>import("../home/home")

<Switch>
   <Route path="/home" component={lc(Home)} />
	//.....
</Switch>

npm run build js文件夹，每个路由使用不同的chunk

SourceMap

在使用react-create-app搭建的项目，在我们编译打包时会产生很多.map文件，导致编译后的项目非常大，如下配置可以让打包后的文件不包含.map文件

在node_modules文件夹中找到react-scripts包　　
路径/node_modules/react-scripts/config/webpack.config.js
找到const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== ‘false’;将这一行代码注释
在下面添加一行 const shouldUseSourceMap = false;

npm run build

gzip

nginx

location ~ .*\.(jpg|gif|png|bmp)$ {
       gzip on;
       gzip_http_version 1.1;
       gzip_comp_level 3;
       gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
      }

如果没有这栏，可以在当前栏右击 Response Header 选项中找到