1、简言

性能优化是前端工程师必须掌握的技能，一个网站除了健全的功能之外，最重要的是首页的响应情况，它直接影响到了用户是否回留意你的网站。

2、性能指标查看

Lighthouse

使用google开发者工具提供的性能查看工具

根据它提供的建议进行修改。

webpack构建

使用webpack-bundle-analyzer可以分析每个文件的大小

3、优化指导

3.1、分割代码、减少包体积

webpack的externals, 可以将第三方sdk库分割出来，减少单个文件体积和提高构建速度。

// 告诉webpack不需要打包react与react-dom
externals:{
    react: 'React',
    'react-dom': 'ReactDOM',
}
// react 代表 包名， `React`代表全局变量名。

对于非首屏需要展示的组件，使用懒加载，从而分割代码。

import React, {
  Suspense,
  lazy,
} from 'react'
const LiveIM = lazy(() => import(/* webpackChunkName: "LiveIM" */ '../IM'))

export default () => {
    const [isShow, setIsShow] = useState(true)
    return <Suspense fallback={''}>{isShow && <LiveIM/>}</Suspense>
}

更进一步，可以给非首屏加载的资源使用webpack添加prefetch

<link rel="prefetch" as="script" href="index.js">

prefetch 是利用浏览器的空闲时间，加载页面将来可能用到的资源的一种机制；通常可以用于加载其他页面（非首页）所需要的资源，以便加快后续页面的打开速度

使用tree shaking，用es6进行代码功能的导入与导出，让webpack能做到自动过滤没有用到的代码。

3.2、CDN资源缓存

写一个plugin，在打包环境下监听，当webpack构建完毕后，将dist文件里面的所有文件除了index.html上传到cdn厂商那里。记得把打包将public配置为cdn厂商提供的域名

    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'https://a.b.com/', // cdn厂商配置的域名
        filename: '[name]/static/bundle.[fullhash].js',
    },
    plugins: [
        new File2Cdn(),
    ],

3.3、图片优化

图片压缩，使用熊猫压缩，或者其提供的sdk。
使用webp，使用sharp可以对png图片进行转换。
大长图要求设计进行分块。
图片懒加载，使用IntersectionObserver监听
小图片转base64（小于4KB），减少http请求

3.4、react代码的优化

参考资料

前端性能优化——首页资源压缩63%、白屏时间缩短86%

性能优化理论知识与实践