关于React 打包优化

1.代码分割：React已经内置了代码分割的支持。你可以使用React.lazy和Suspense来实现动态导入，这样可以将代码分割成多个小的bundle，而不是一个大的bundle。

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

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

2.Tree Shaking：这是一种由Webpack提供的优化方法，可以在打包时去除未使用的代码。要使用Tree Shaking，你需要在你的package.json文件中添加一个"sideEffects": false字段。

{
  "name": "your-project",
  "sideEffects": false
}

3.使用生产模式打包：在打包时，确保设置NODE_ENV环境变量为production。这将启用Webpack的生产模式，进行更多的优化，如压缩代码和去除开发时的警告。

NODE_ENV=production npm run build

4.优化图片和其他静态资源：使用适当的loader，如url-loader和file-loader，可以优化图片和其他静态资源的加载。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

5.使用React.PureComponent或React.memo：这可以减少不必要的渲染，提高应用的性能。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    // ...
  }
}

6.按需加载第三方库：一些库，如lodash和moment，支持按需加载。这意味着你只需要导入你实际使用的部分，而不是整个库。

import _get from 'lodash/get';

7.使用Webpack的SplitChunksPlugin：这可以将公共的依赖模块提取到一个单独的chunk中，这样可以避免重复的代码。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};