React性能优化

去除console

1、安装插件

npm install babel-plugin-transform-remove-console
or
yarn add babel-plugin-transform-remove-console

2、配置 webpack

在config.js文件或.umirc.ts中进行配置

//在生产环境中取消console
extraBabelPlugins: [isProd ? 'transform-remove-console' : '']
//或者
//在所有环境中取消console
extraBabelPlugins: ['transform-remove-console']

开启 Gzip压缩

加快收评渲染速度

1、安装插件

webpack文档

npm install compression-webpack-plugin
yarn add compression-webpack-plugin

2、配置 webpack

大文件上传

import { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';

const CHUNK_SIZE = 1024 * 1024;

export default () => {
  const [uploadedFile, setUploadedFile] = useState(null);
  const [uploadedChunks, setUploadedChunks] = useState({});
  const [isUploading, setIsUploading] = useState(false);
  console.log(uploadedChunks);
  const onDrop = useCallback(acceptedFiles => {
    const file = acceptedFiles[0];
    setUploadedFile(file);
  }, []);

  const uploadChunks = async () => {
    if (!uploadedFile) return;
    setIsUploading(true);
    const totalChunk = Math.ceil(uploadedFile.size / CHUNK_SIZE); // 最多可为多少个切片
    const chunks = []; // 存储拆分的文件切片

    for (let i = 0; i < totalChunk; i++) {
      const start = i * CHUNK_SIZE;
      const end = Math.min(start + CHUNK_SIZE, uploadedFile.size);
      const chunk = uploadedFile.slice(start, end);
      chunks.push(chunk);
    }

    // 循环调用接口
    console.log(chunks);
    for (let index = 0; index < chunks.length; index++) {
      const formDatas = new FormData();
      formDatas.append('file', chunks[index]);
      formDatas.append('index', index + 1);
      formDatas.append('totalChunks', totalChunk);

      //   await axios.post('/upload-url', formDatas, {
      //     headers: {
      //       'Content-Type': 'multipart/form-data',
      //     },
      //   });
      setIsUploading(false);
      setUploadedChunks(prevChunks => ({
        ...prevChunks,
        [index + 1]: true,
      }));
    }
  };
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        {isDragActive ? (
          <p>将文件放到此处</p>
        ) : (
          <p>将一些文件拖放到此处，或单击以选择文件</p>
        )}

        <ul>
          {Object.keys(uploadedChunks).map(chunkNumber => (
            <li key={chunkNumber}>{`切片 ${chunkNumber}`}</li>
          ))}
        </ul>
      </div>

      {uploadedFile && !isUploading && (
        <button onClick={uploadChunks}>上传</button>
      )}
      {isUploading && <p>上传中...</p>}
    </>
  );
};