从小到大，从内到外：带你了解包体积优化62.7%的秘密

前端

2023-10-17 14:57:18

今天前锋找到我，向我请教了一个性能优化的问题，我简单的跟他回答了一下例如组件懒加载、资源懒加载、开启gzip、公共的第三方包上cdn、还有基础的雅虎53条军规一条条排查等等。

这些都是一些常见的优化方法，但具体到他的项目，还需要根据具体情况进行分析。

于是我让他把项目代码发给我，我仔细查看了一下代码，发现了很多可以优化的点。

首先是组件懒加载。

组件懒加载是指只在需要的时候加载组件，而不是在页面加载的时候就加载所有组件。

这可以减少页面加载时间，提高页面的性能。

在React中，可以使用React.lazy()函数来实现组件懒加载。

例如：

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

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

这样，MyComponent组件只有在需要的时候才会被加载。

其次是资源懒加载。

资源懒加载是指只在需要的时候加载资源，而不是在页面加载的时候就加载所有资源。

这可以减少页面加载时间，提高页面的性能。

在React中，可以使用import()函数来实现资源懒加载。

例如：

const image = new Image();
image.src = import('./image.png');

const App = () => {
  return (
    <div>
      <img src={image.src} />
    </div>
  );
};

这样，image.png资源只有在需要的时候才会被加载。

然后是开启gzip。

gzip是一种压缩算法，可以减少文件的体积。

在服务器上开启gzip可以减少页面加载时间，提高页面的性能。

在Nginx中，可以使用以下配置开启gzip：

gzip on;
gzip_types text/plain text/css application/javascript application/json application/xml application/xml+rss;

最后是公共的第三方包上cdn。

cdn是一种内容分发网络，可以将文件的副本存储在不同的服务器上。

当用户访问文件时，可以从距离最近的服务器下载文件。

这可以减少文件加载时间，提高页面的性能。

在React中，可以使用以下工具将公共的第三方包上cdn：

npm install --save-dev webpack-cdn-plugin

然后在webpack.config.js文件中配置：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.CdnPlugin({
      modules: [
        {
          name: 'react',
          var: 'React',
          path: 'https://unpkg.com/react@16.13.1/umd/react.production.min.js',
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: 'https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js',
        },
      ],
    }),
  ],
};