Module Import und Destrukturierung Leistungen

Question

ich auf Material UI docs vor kurzem lesen:

Beachten Sie, dass im obigen Beispiel verwenden wir:

import RaisedButton from 'material-ui/RaisedButton'

statt

import {RaisedButton} from 'material-ui'

Dies wird y machen unser Build-Prozess schneller und Ihre Build-Ausgabe kleiner.

Früher habe ich gedacht, dass es genau das gleiche war, aber eigentlich bedeutet dies, dass die zweiten Leitungen juste wie ist:

import materialUI from 'material-ui' 
const {RaisedButton} = materialUI 

Und es wird genau das gleiche Bündel direkt produzieren?

Ich habe einige Tests, Bündel Größe verwenden unterschiedliche combinaisons des Imports mit 2 Dateien vergleichen:

index.js:

import RaisedButton from 'material-ui/RaisedButton' 
// or import {RaisedButton} from 'material-ui' 
import file from './otherFile.js' 

console.log(RaisedButton) 
console.log(file) 

otherFile.js

import RaisedButton from 'material-ui/RaisedButton' 
// or import {RaisedButton} from 'material-ui' 

export default RaisedButton 

Die Ergebnisse sind recht wie erwartet mit nur import RaisedButton from 'material-ui/RaisedButton' das bündel wird so etwas wie 24k LoC (material-ui lasten React abhängdenci es). Unter Verwendung import {RaisedButton} from 'material-ui', in einer oder beiden Datei (en), wird das Bündel so etwas wie 57k LoC sein.

Meine Frage bezieht sich hauptsächlich auf Leistungen und Best Practices, mit einer kleinen Verwendung von Material-UI sollte ich immer importieren from 'material-ui/ComponentName, aber wenn ich eine Menge Material-UI-Komponenten auf ein größeres Projekt verwenden, wird es nicht auswirken Bundle Größe, wenn ich import {Comp1, Comp2, Comp3} from 'material-ui' als das gesamte Paket wird nur einmal im Bündel?

Answer 1

Ja das ist richtig. Indem Sie dies tun:

import {RaisedButton} from 'material-ui' 

Die Root-Bibliothek-Datei von 'Material-Ui' wird enthalten sein. Innerhalb dieser Datei wird es wahrscheinlich viele import RaisedButton from './RaisedButton' Anweisungen geben, um alle Komponenten der Bibliothek auf einmal aufzunehmen (siehe https://github.com/callemall/material-ui/blob/master/src/index.js).

tun:

import RaisedButton from 'material-ui/RaisedButton' 

die ganze Zeit wird eine bessere Leistung in Bezug auf die Bündelgröße gurantee, da Sie nur nur die Abhängigkeiten immer werden Sie brauchen. Wenn Sie nur einige wenige Komponenten verwenden, wird dadurch auch die Verarbeitungsgeschwindigkeit erhöht, da die Dateien für die anderen Komponenten in der Bibliothek nicht analysiert werden müssen.

Wenn Sie alle oder fast alle Komponenten in der Bibliothek verwenden, sollte die Build-Leistung in etwa gleich sein, denn wenn sowohl das root-Skript von 'material-ui' als auch Ihre Datei die gleiche Komponente zweimal benötigen, Ihr Bundler ist intelligent genug, um das Ergebnis zwischenzuspeichern und die Dateien nicht erneut zu analysieren. Ihr Bundler wird in diesem Fall das gleiche zu einem billigen Vorgang über importieren.

Ich würde empfehlen, die import RaisedButton from 'material-ui/RaisedButton' Syntax zu verwenden, da dies mehr an Ihre Bedürfnisse im Laufe der Zeit passt, da Sie nicht immer alle Komponenten benötigen und es unwahrscheinlich ist, dass Sie alle auf einmal verwenden. Zusätzlich unterstützen einige Bundler wie das Webpack die Bündelung, die mit der Methode import {RaisedButton} from 'material-ui' nicht einfach wäre.