Hallo allerseits!
Während meiner Arbeit mit dem Webpack habe ich einige interessante Tipps gesammelt, die Ihnen bei der Vorbereitung einer perfekt optimierten Anwendung helfen. Fangen wir an!
1. Verwenden Sie Fast-Async anstelle von Regenerator-Runtime
Normalerweise verwenden Entwickler
@ babel / preset-env , um die gesamte moderne Syntax in ES5 zu konvertieren.
Mit dieser Voreinstellung sieht die Pipeline der Transformationen asynchroner Funktionen folgendermaßen aus:
Asynchrone Quellfunktion ->
Generator ->
Funktion mit
Regenerator-LaufzeitBeispiel1. Die ursprüngliche asynchrone Funktion
const test = async () => { await fetch('/test-api/', { method: 'GET' }); }
2. Generator
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } const test = (() => { var _ref = _asyncToGenerator(function* () { yield fetch('/test-api/', { method: 'GET' }); }); return function test() { return _ref.apply(this, arguments); }; })();
3. Funktion mit Regenerator-Laufzeit
'use strict'; function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } var test = function () { var _ref = _asyncToGenerator( regeneratorRuntime.mark(function _callee() { return regeneratorRuntime.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: _context.next = 2; return fetch('/test-api/', { method: 'GET' }); case 2: case 'end': return _context.stop(); } } }, _callee, undefined); })); return function test() { return _ref.apply(this, arguments); }; }();
Mit
Fast-Async wird die Pipeline vereinfacht, um:
Asynchrone Quellfunktion -> Funktion mit Versprechungen
Beispiel1. Die ursprüngliche asynchrone Funktion
const test = async () => { await fetch('/test-api/', { method: 'GET' }); }
2. Funktion mit Versprechen
var test = function test() { return new Promise(function ($return, $error) { return Promise.resolve(fetch('/test-api/', { method: 'GET' })).then(function ($await_1) { try { return $return(); } catch ($boundEx) { return $error($boundEx); } }, $error); }); };
Aus diesem Grund haben wir jetzt keine Regenerator-Laufzeit auf dem Client und keine zusätzlichen Wrapper aus Transformationen.
Um Fast-Async in Ihr Projekt zu integrieren, müssen Sie:
1. Installieren Sie es
npm i fast-async
2. Aktualisieren Sie die Konfiguration des Labels
Für mich hat diese Optimierung die Größe von js-Dateien um 3,2% reduziert. Eine Kleinigkeit, aber schön :)
2. Verwenden Sie lose Transformationen
Ohne spezielle Konfiguration versucht
@ babel / preset-env , Code so nah wie möglich an der Spezifikation zu generieren.
Höchstwahrscheinlich ist Ihr Code jedoch nicht so schlecht und verwendet nicht alle möglichen Extremfälle der ES6 + -Spezifikation. Dann kann der gesamte zusätzliche Overhead entfernt werden, indem lose Transformationen für Preset-Env aktiviert werden:
Ein Beispiel dafür finden Sie
hier .
In meinem Projekt reduzierte dies die Bündelgröße um 3,8%.
3. Konfigurieren Sie die js- und css-Minifizierung mit Ihren Händen
Die Standardeinstellungen für Minificatoren enthalten nur die Transformationen, die vom Programmierer nicht unterbrochen werden können. Aber wir lieben es, Probleme zu verursachen?
Versuchen Sie, die Einstellungen
für den js-Minifier und Ihren
CSS-Minifier zu lesen (ich verwende
cssnano ).
Nachdem ich die Docks studiert hatte, machte ich diese Konfiguration:
Infolgedessen verringerte sich die Größe von js-Dateien um 1,5% und von css um 2%.
Vielleicht kannst du es besser machen?
UPD 01/11/2019: UglifyJsPlugin ist veraltet, Webpack verwendet jetzt
TerserWebpackPlugin . Verwenden Sie es.
4. Verwenden Sie den Nulllader, um unnötige Abhängigkeiten zu entfernen
Die
gsap- Entwickler
haben eine großartige Bibliothek zum Erstellen von Animationen. Aufgrund der Tatsache, dass es aus dem Jahr 2008 stammt, blieben jedoch einige Merkmale erhalten.
Nämlich
dieser . Dank dessen zieht TweenMax 5 Plugins und easyPack, die völlig optional sind.
Ich bemerkte drei redundante Plugins in mir und schnitt sie mit dem
Nulllader aus :
Und 106 kb werden zu 86. Ja!
Der Nulllader kann weiterhin verwendet werden, um unnötige Polyfüllungen zu entfernen, die Bibliotheksautoren sorgfältig für uns gepflanzt haben.