公司项目采用使用React16+Webpack3+Graphql来作为技术构建，在图像等方面上使用七牛；
下面是本人将会围绕当前技术来进行优化的体验，理解和使用到的都不算特别复杂，但是点比较多，可能可以启发一下；

React

版本升级(当前是16.8.6)

如果是React15的更应该升级到16，除新的Api外，React本身也进行了优化如Fiber等，体积也更小；

Api更新

1、 React.Memo：LessState组件上采用React.Memo来进行处理，代替原先的PureComponent；
2、 去除依赖库：如果原先有使用一些Lazy库，可以考虑直接使用React.Lazy来实现，减少打包体积，原先的路由懒加载是直接写了一个方法，也可以使用React.Lazy来完成并且Suspense可以实现占位图；

import React, { Component } from 'react'    import LoadingViewContainer from '../components/LoadingViewContainer'     export default function asyncComponent(importComponent) {      return class extends Component {        state = {          component: null        }        async componentDidMount() {          const { default: component } = await importComponent()          this.setState({            component: component          })        }        render() {          const C = this.state.component          return C ? <C {...this.props} /> : <LoadingViewContainer />        }      }    }

3、 使用Hooks：Hooks是React16.8之后出的一个新的Api，与以前的Class Component改变很多，如useReducer有人用来实现Redux，至于是否可以真的代替，这个还没有深入了解，按官方说法，因为不使用原先生命周期以及逻辑业务的复用性，可以减少很多代码；具体的不在这里去详写，本身也理解不够透彻，只贴一个自己写的简单的代替原先React-Helmet(Helmet)，后续可能会单独写一下Hooks；

import { useEffect } from 'react'function Helmet({ title, link }){  useEffect(() => {    document.title = title    const node = document.getElementsByTagName('link')    let isHadLink = false    for (let i = 0; i < node.length; i++) {      // NOTE:有link直接修改即可      if (node[i].rel === linkRel) {        isHadLink = true        node[i].href = link        break      }    }    if (!isHadLink) {      const newLink = document.createElement('link')      newLink.rel = linkRel      newLink.href = link      document.head.appendChild(newLink)    }  }, [title, link])  return null}

经验技巧

1、 图片在需要用到的地方require，不要在文件开头直接import进来；
2、 使用import { xxx } from 'xxx'，避免import整个文件，注重导包；
3、 一些必须要的依赖可以将它放到需要触发的条件下import，如项目用到的验证码验证，所以将下面代码放到Click里面进行处理；

handleClick = () => {    import('hash.js/lib/hash/sha/256').then(({ default: sha256 }) => {      //do something    })}

4、 在同级元素显示可以使用<></>来包裹，<React.Fragment>也是和<>一样，可不渲染该标签，如下面则不会出现<div>；

<div>    <a />    <b /></div>可以采用return (    <>       <a />       <b />    </>)或者return [    <a key="a"/>,    <b key="b" />]

5、动画方面采取json来实现，不使用mp4等，减少体积；
6、一切需要使用的依赖都考虑小而优的，如

  1. 日期方面可以采用date-fns，基本功能完善，但还是建议使用babel-plugin-date-fns来减少打包体积；
  2. 轮播使用react-id-swiper来代替swiper；
  3. 视频采取lottie-web库；