Next.js: ~50 % ungenutzte Bytes in app.js mit Chrome Dev Tools-Abdeckung

Erstellt am 6. Apr. 2017  ·  3Kommentare  ·  Quelle: vercel/next.js

Dienstprogramm zur Codeabdeckung der Chrome Dev Tools

screen shot 2017-04-06 at 02 23 23

Natürlich in der Produktion.

Abgesehen vom CSS (das erste Mal, wenn ich styled-jsx und das Design gemeinsamer Stile verbessern oder etwas wie styletron ) — habe ich die automatische Code-Aufteilungsfunktion falsch verstanden?

Um etwas Kontext zu geben, verwende ich einen HOC, um jede Seite zu umbrechen, und übergebe sowohl Methoden als auch Requisiten, die nicht unbedingt von jeder Seite verwendet werden. Außerdem: Bei einigen Importen bin ich hier und da vielleicht nachlässig gewesen; Ich verwende re-base, das derzeit die gesamte Firebase importiert (in meinem Anwendungsfall nicht erforderlich).

Mische ich möglicherweise automatic code splitting Webpack mit static analysis and tree shaking a là Rollup? Wenn ja,

  1. Sollte Next Tree-Shaking und Eliminierung toten Codes durchführen?

  2. Falls nicht, haben Sie Vorschläge zur Herangehensweise und Lösung dieses Problems? Die Coverage-Ergebnisse von Chrome Dev Tools können noch nicht ganz trivial exportiert werden, und daher bin ich mir nicht sicher, wie ich ungenutzte Codepfade und Importe mit der minimierten Ausgabe identifizieren kann.

  3. Wäre die Verwendung von so etwas wie webpack-rollup-loader möglich und sinnvoll?

  4. Kann etwas davon zu Verbesserungen der bereits großartigen Funktionsweise von Next führen?

Danke!

Hilfreichster Kommentar

Von diesem Thread aus verlinkt, ist hier anscheinend ein Dienstprogramm, um zu testen, ob das Baumschütteln in Webpack richtig auftritt:
https://github.com/halt-hammerzeit/es6-tree-shaking-test

Alle 3 Kommentare

Ich gehe davon aus, dass dies daran liegt, wie Webpack mit Tree-Shaking umgeht.
Es benötigt ES2015-Module. Ich hoffe, React bietet das nicht und deshalb ist dies der Fall.
Aber ich möchte hier experimentieren. Alle Ideen/Verbesserungen willkommen.

Möglicherweise im Zusammenhang mit webpack#2867 ?

Von diesem Thread aus verlinkt, ist hier anscheinend ein Dienstprogramm, um zu testen, ob das Baumschütteln in Webpack richtig auftritt:
https://github.com/halt-hammerzeit/es6-tree-shaking-test

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

havefive picture havefive  ·  3Kommentare

timneutkens picture timneutkens  ·  3Kommentare

kenji4569 picture kenji4569  ·  3Kommentare

jesselee34 picture jesselee34  ·  3Kommentare

nhanco picture nhanco  ·  3Kommentare