基于React和Webpack的Optimize

公司项目采用使用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库；