前端性能优化可以这样做

在前端项目工程中，一般项目在gzip压缩过后的大小不允许超过1M。我们在打包项目时npm run build-shell，在项目的dist的文件夹下有个report.html，浏览器打开文件，可以看见各包的大小。

我们会看各包的大小，例如144.15c891.js。 接下来我们优化一下打包配置，将功能相似的包放在一起打包，并重新命名。

再次重新打包，重点关注其中的ellmAgentModal这个包，因此它占用资源太多了。

我们看到打包之后该包的gzipped size为901k，显然不合理，毕竟整个项目才只有1M的资源空间。点开左上角的箭头，详细看一下该包的详情。

发现ellmAgentModal中存在一个900多k的背景图片，这对于使用这个包的项目来说是一个很大负担。F12查看加载时间有7s多。

将该项目A中的背景图片删除，重新npm发布，之后我们的项目中再重新引入该依赖，再次打包。发现包的体积变小，加载时间变为700ms。

再进一步的优化：将项目A和我们的项目中相同的依赖放在项目A的peerDependencies（同级依赖）中，例如react、react-dom、antd等，这样打包项目A时不打包这些公共依赖，而是放在宿主项目中去打包。

再进一步的优化：由于该ellmAgentModal组件只有触发点击事件才会调用，而现在是只要进入首页就加载相关依赖，导致首页加载速度很慢。考虑用懒加载，用到的时候才会加载，从而减轻首页加载压力。

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

总结：

1. 分析前端工程打包情况，定位问题；
2. 优化webpack打包配置，将代码拆分成多个独立的文件（chunks），浏览器可以并行加载多个文件，加快页面加载；
3. 将来封装成公共组件的项目工程中使用peerDependecies，由宿主环境提供；
4. 组件懒加载。