React Komponenten große Größe

Question

Ist es normal, über 700kB Dateigröße für eine Reaktionskomponente zu haben? Dies ist die Dateigröße nach der Kompilierung.

GridComponent.js 732 kB  0 [emitted] GridComponent 
    main.js 7.97 kB  1 [emitted] main 

GridComponent ist die Reaktionskomponente. main ist normal js zum Vergleich.

Ist das normal? Ich plane nur reagierende Komponenten in Seiten, die sie erfordern.

Answer 1

Ich kann sehen, dass Sie Webpack in Ihrer App verwenden, und Ihre GridComponent.js sollte etwas wie require('react'); (oder import React from 'react';, wenn ES6-Module mit Babel verwenden) haben.

Wenn Sie Dinge benötigen, "fügt" webpack all Ihre Abhängigkeiten in die angegebenen "Ausgabe" -Einstellungen ein (verfügbar in webpack.config.js). Also, wenn Sie den Inhalt von GridComponent.js überprüfen, werden Sie sehen, dass React drin ist. In Ihrem Fall ist diese GridComponent.js Ihre "gebündelte Datei" (sie enthält alle Abhängigkeiten, die Sie importiert haben). Deshalb scheint es "groß" zu sein, denn diese Datei enthält Ihre Komponente und Reagieren selbst (und auch andere Abhängigkeiten).

Wenn Sie sagen "Ich plane, nur Komponenten in Seiten, die sie erfordern.", Ich denke, Sie möchten Split Ihr Code, so dass Ihre Seite nur die Dinge laden, die Sie brauchen. Sie können hier weitere Informationen über Code-Splitting überprüfen:

https://webpack.github.io/docs/code-splitting.html

Eine grundlegende "Splitting" Strategie wäre Ihr "Verkäufer" Code aufzuspalten von Ihrem "app" Code (https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code). In Ihrem Fall würden Reagieren, Reagieren von DOM und andere "allgemeine" Abhängigkeiten auf "Anbieter" und Ihre App ist der Code, den Sie geschrieben haben.

Aber nur als Tipp, Code-Aufteilung ist nur wirklich benötigt, wenn Sie viel Code haben. Weil manchmal eine zusätzliche Netzwerkanforderung mehr "Latenz" einführt als ein paar weitere Bytes. Oder Sie haben eine "spezielle" Caching-Strategie, da sich Ihre App öfter ändern kann als Ihr Lieferantencode (Ihr Lieferantencode wird nur erneut heruntergeladen, wenn eine Abhängigkeitsversion geändert wird), und Sie vermeiden das Herunterladen vieler Bytes als einfache Sache ist in Ihrer App geändert.

Ich denke, das löst Ihre Frage, aber um hier weitere Informationen hinzuzufügen, wenn Sie Ihren Code an mehr Personen verteilen möchten (zB ein Open-Source-Projekt), können Sie Ihren Code verteilen und sagen: "Okay, um das auszuführen Sie müssen diese andere Abhängigkeit installieren ", und Sie können dies mit peer dependencies erreichen.

Wenn Peer-Abhängigkeiten nicht Ihr Fall ist, können Sie einige Bytes durch Minimieren Ihrer Datei speichern (Sie können dies tun, indem Sie Ihre Webpack-Konfiguration ändern).

http://moduscreate.com/optimizing-react-es6-webpack-production-build/