Die Kompilierung der Entwicklungsumgebung zum Erstellen und Reagieren von Apps ist eine zu langsame Lösung

Projektumgebung: Windows 10 1089 Version Create-React-App: 3.0.0 React: 16.8.6 React-Router-Dom: 5.0.0

Option eins

使用babel-plugin-dynamic-import-node

Prinzip: Konvertieren Sie import () in require () und importieren Sie alle asynchronen Komponenten synchron.
Konfigurationsdatei für das Seitenrouting: Verwenden Sie die vom React-Router empfohlene ladbare Ladedatei ohne Änderungen

Schritte zur Verwendung

1. Installationspaket

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

oder

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

2. Umgebungsvariablen konfigurieren

Erstellen Sie die .env.development-Datei und die .env.production-Datei im Projektstammverzeichnis

.env.development Datei

NODE_ENV=development
PUBLIC_URL=/
port=8343

.env.production Datei

NODE_ENV=production
PUBLIC_URL=/
port=8343

3. Configuration.babelrc (package.json-Konfiguration: Fügen Sie einfach das folgende env-Feldobjekt in das Feldkonfigurationselement "babel" ein.)

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

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

4. Starten Sie das Projekt, nachdem der Garnstart abgeschlossen ist. Ändern Sie den Projektcode, um den Zeitvergleich auszuführen und zu kompilieren.
   Vor der
   
   Konfiguration Nach der Konfiguration
   

Beim Vergleich der beiden Bilder haben wir festgestellt, dass die Startzeit von 27,269 Sekunden auf 11,462 Sekunden reduziert wurde, was mehr als die Hälfte schneller ist.
Die Kompilierungszeit der geänderten Datei wurde von 16,931 Sekunden auf 0,702 Sekunden reduziert, was mehr als 20-mal schneller ist.

Option II

Manuelles Ändern der Importmethode zum Laden von Routing-Komponenten
1. Projektdateiverzeichnis

2.
Kernänderung src / router / loader.js Datei

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.
Importieren Sie die Loader-Datei in die Datei src / router / modules / appSetting.js in der Routing-Konfigurationsdatei

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. Starten Sie das Projekt nach Abschluss der Änderung und ändern Sie den Projektcode. Beim Vergleich der beiden Bilder
vor und

nach der Änderung wurde

festgestellt, dass die Startzeit von 27,269 Sekunden auf 14,312 Sekunden reduziert wurde, was fast die Hälfte schneller war.
Die Kompilierungszeit der geänderten Datei wurde von 16,931 Sekunden auf 3,696 Sekunden reduziert, was etwa fünfmal schneller ist.

Andere Optionen

Teilaktualisierung mit React-Hot-Loader-Hot-Loading

Die tatsächliche Erfahrung verbessert die Entwicklungs- und Kompilierungsgeschwindigkeit nicht wesentlich, was hier weggelassen wird.

um zusammenzufassen

Es wird empfohlen, die erste Option zu verwenden, die schnell ist und weniger Nebenwirkungen hat.

Im zweiten Schema werden die .jsx- oder .js-Dateien unter src / views / gepackt. Ob Sie abhängig sind oder nicht. Dies hat also einen Nebeneffekt, das heißt, es packt mehr und verwendet möglicherweise niemals js-Code. Dies erhöht natürlich nur die Größe des dist- oder build-Ordners, hat jedoch keine Nebenwirkungen auf den Online-Code.

Die erste Lösung löst das Problem des wiederholten Packens der zweiten Lösung. Gleichzeitig ist sie für den Code sehr aufdringlich. Beim Schreiben von Routing müssen Sie nur die offizielle Methode zum langsamen Laden von Dokumentenrouting befolgen, und der Rest bleibt babel überlassen Damit umgehen.