Alle meine React-Projekte neigen dazu, in der Dateigröße unglaublich groß zu sein (bundle.js ist 4.87 mb und vendor.bundle.js ist 2.87 mb). Ich habe keine Ahnung, warum es so groß ist. Ich habe bereits ein upglifyJS, aber das scheint nicht viel zu helfen (5.09 & gt; 4.87mb und 2.9 & gt; 2.87mb)
%Vor%Mein Paket.json
%Vor%Hat jemand eine Idee, wie man das beheben kann?
BEARBEITEN
Ich bin mir nicht sicher, ob Sie auf Mac / IOs oder Windows sind, aber zwei Dinge, die ich bemerkt habe:
1: "deploy": "NODE_ENV=production webpack -p" wird nicht korrekt angezeigt, Sie müssen die Variable festlegen, wenn Sie sie zum Entwickeln und für die Bereitstellung erstellen, und hier legen Sie sie nicht fest.
2: Sie müssen es vorher in der Eingabeaufforderung terminal / comand setzen.
Hier ein Beispiel für webpack minimieren und bereitstellen, Sie müssen ein wenig anpassen, aber ich hp dies sollte Ihnen helfen.
Sie müssen zuerst diese Umgebungsvariable für den Befehl node on comand einstellen, öffnen Sie sie in Windows oder Terminal in mac und:
%Vor%Sie können in Fenstern oder in der Liste in mac ein Echo anzeigen, um zu prüfen, ob eine Variable hinzugefügt wurde.
Dann in Ihrer webpack.config.js
%Vor%In Ihrer package.json können Sie diese Skripte einstellen:
Wenn Sie Windows verwenden:
%Vor%Wenn Sie auf Mac IOS sind: Wenn der Export nicht funktioniert, verwenden Sie stattdessen set, der Unterschied zu Windows und Mac ist der Abstand nach & amp; & amp ;.
%Vor%Verwenden Sie die comand npm run Uhr, um in Entwicklung und npm laufen zu lassen, um sie für die Produktion in einer verkleinerten Version zu bauen.
Ich würde wärmstens empfehlen, mit dem Webpack Bundle Analyzer das Paket kleiner zu machen ( Ссылка ). Sie können sehen, was Ihr Bündel so groß macht. Möglicherweise verwenden Sie auch Firebase, Lodash und Jquery. Probieren Sie nicht nur die Plugins für die Webpack-Produktion aus, sondern versuchen Sie auch, alles zu ignorieren, was Sie nicht verwenden, und importieren Sie nur das, was Sie brauchen: In Webpack-Plugins:
%Vor%Bei Ihren Importen:
%Vor%Importieren Sie für lodash nur, was Sie benötigen, oder erstellen Sie einen benutzerdefinierten Build ( Ссылка ):
%Vor%Sie können auch benutzerdefinierte jquery-Builds erstellen.
Können Sie das hinzufügen?
%Code%
in devtool: 'cheap-module-source-map', ?
Reagieren erwartet, dass Sie NODE_ENV auf 'production' für Produktions-Builds festlegen und ausführen es durch Uglify - das wird eine Menge extra Ausführlichkeit los, Konsolenprotokollierung, etc. Stellen Sie sicher, dass Sie diese Umgebungsvariable beim Erstellen über Webpack setzen (zB NODE_ENV=production webpack in der Kommandozeile).
Tags und Links javascript build reactjs webpack