A compilação do ambiente de desenvolvimento Create-react-app é uma solução muito lenta

Ambiente do projeto: windows 10 1089 versão create-react-app: 3.0.0 react: 16.8.6 react-router-dom: 5.0.0

opção um

使用babel-plugin-dynamic-import-node

Princípio: Converta import () para require (), importe todos os componentes assíncronos de forma síncrona.
Arquivo de configuração de roteamento de página: Use o arquivo de carregamento carregável recomendado pelo react-router sem qualquer modificação

Etapas para uso

1. Pacote de instalação

npm install babel-plugin-dynamic-import-node --save-dev

ou

yarn add babel-plugin-dynamic-import-node --dev

2. Configurar variáveis ​​de ambiente

Crie o arquivo .env.development e o arquivo .env.production no diretório raiz do projeto

arquivo .env.development

NODE_ENV=development
PUBLIC_URL=/
port=8343

arquivo .env.production

NODE_ENV=production
PUBLIC_URL=/
port=8343

3. Configuration.babelrc (configuração do package.json: basta colocar o seguinte objeto de campo env no item de configuração do campo "babel")

{
    
    
    "presets": [
        "react-app"
    ],
    // 开发环境下配置项
    "env": {
    
    
        "development": {
    
    
          "plugins": [
            "dynamic-import-node"
          ]
        }
      },

    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
    
    
                "legacy": true
            }
        ],
        [
            "import",
            {
    
    
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            }
        ]
    ]
}

4. Inicie o projeto após o início do yarn ser concluído, altere o código do projeto para executar e compilar a comparação do tempo
   Antes da
   
   configuração Após a configuração
   

Por meio da comparação das duas fotos, descobrimos que o tempo de inicialização foi reduzido de 27,269 segundos para 11,462 segundos, o que é mais da metade mais rápido.
O tempo de compilação do arquivo modificado é reduzido de 16,931 segundos para 0,702 segundos, o que é mais de 20 vezes mais rápido.

Opção II

Modifique manualmente o método de importação dos componentes de roteamento de carregamento
1. Diretório de arquivos do projeto

2.
Arquivo src / router / loader.js de modificação do núcleo

import Loadable from "react-loadable";
import Loading from "@/components/Loading";

// 项目中所有页面在views文件下

const devLoader = file => require("@/views/" + file ).default;

const loader = viewPath =>
  Loadable({
    
    
    loader: () => import(`@/views/${
      
      viewPath}`),
    loading: Loading
  });

const _import = process.env.NODE_ENV === "production" ? loader : devLoader;

export default _import;

3.
Importe o arquivo do carregador no arquivo src / router / modules / appSetting.js no arquivo de configuração de roteamento

import React from "react";
import loader from "../loader";

// 酒店信息设置
const SettingHotel = loader(`setting/baseSetting`);
// 协议设置
const SettingProtocol = loader(`setting/protocol`);

const routers = [
  {
    
    
    path: "/setting",
    title: "设置",
    icon: "setting",
    redirect: "/setting/base",
    forbiddenLink: true,
    subRouters: [
      {
    
    
        path: "/setting/base",
        component: () => <SettingHotel />,
        title: "基础设置"
      },
      {
    
    
        path: "/setting/protocol",
        component: () => <SettingProtocol />,
        title: "协议"
      }
    ]
  }
];

export default routers;

4. Inicie o projeto após a conclusão da modificação e modifique o código do projeto
Antes e

depois da modificação,

comparando as duas imagens, descobrimos que o tempo de inicialização foi reduzido de 27,269 segundos para 14,312 segundos, o que foi quase a metade mais rápido.
O tempo de compilação do arquivo modificado é reduzido de 16.931 segundos para 3.696 segundos, o que é cerca de cinco vezes mais rápido.

Outras opções

Atualização parcial usando o carregamento a quente react-hot-loader

A experiência real não melhora muito a velocidade de desenvolvimento e compilação, que é omitida aqui.

Resumindo

Recomenda-se usar a primeira opção, que é rápida e tem menos efeitos colaterais.

No segundo esquema, os arquivos .jsx ou .js em src / views / serão empacotados. Se você é dependente ou não. Então isso tem um efeito colateral, ou seja, vai empacotar mais e nunca pode usar o código js. É claro que isso apenas aumentará o tamanho da pasta dist ou build, mas não terá nenhum efeito colateral no código online.

A primeira solução resolve o problema de empacotamento repetido da segunda solução. Ao mesmo tempo, é muito intrusiva para o código. Ao escrever o roteamento, você só precisa seguir o método de carregamento lento de roteamento de documento oficial e o resto é deixado para babel Lidar com.