webpack umfasst die gesamte Bibliothek statt nur einen Teil davon

Question

ich eine einfache Komponente haben und ich versuche webpack für meine Build-Prozess zu verwenden, so habe ich so etwas wie

import React  from 'react'; 
import { AppBar } from 'material-ui'; 

export default() => (
    <AppBar 
    title="Octopus" 
    showMenuIconButton={ false } 
    iconElementRight={<SaveLoadAnimation/>} 
    /> 
); 

Ich bin mit dem externen AppBar Komponente. Und in meinem Build-Prozess Ich schließe Reagieren aus dem Bündel wie folgt aus:

externals: { 
    react: { 
     root: 'React', 
     commonjs2: 'react', 
     commonjs: 'react', 
     amd: 'react' 
    } 
} 

Die Probleme ist, dass Webpack im Build umfasst die gesamte material-ui Bibliothek statt nur die AppBar Komponente. Ist es eine Möglichkeit, das zu lösen?

Answer 1

Sie importieren aus der Hauptdatei von Material-UI, die alle Komponenten exportiert.

Siehe: https://github.com/callemall/material-ui/blob/master/src/index.js

Sie versuchen, direkt eine Komponente Ziel könnte. Zum Beispiel

import AppBar from 'material-ui/lib/app-bar'; 

Die möglicherweise Arbeit könnte, aber ich habe nicht versucht.

Webpack Version 2 hat eine coole neue Funktion namens Baumschütteln. Dies ermöglicht es Bundles, überschüssigen Code, der nicht verwendet wird, automatisch abzuschütteln. Dies könnte eine andere Alternative sein, wenn der obige Ansatz nicht funktioniert. Hier

ist ein Beispiel App die Nutzung von Webpack 2 und es ist Baum schütteln Feature: https://github.com/ModusCreateOrg/budgeting-sample-app-webpack2

---

aktualisieren

Es ist ein Thread auf Material-ui, die besser Importe und Baum diskutiert Schütteln.
https://github.com/callemall/material-ui/issues/2679