Optymalizacja rozmiaru paczki produkcyjnej z Webpack

meetjspl / poznan

Wszystkie organizacyjne sprawy Meet.js Poznań

68 stars 1 forks source link

Open kvas-damian opened 4 years ago

kvas-damian commented 4 years ago

Co to jest Webpack?
Różne techniki optymalizacji rozmiaru bundle'a w Webpack na przykładzie apki w Vue.js a. Webpack Bundle Analyzer do analizy zawartości paczki b. TerserPlugin - do minifikacji wyjściowego kodu c. Code Splitting - ręczny podział na mniejsze paczki d. Dynamic Imports - lazy loading modułów JS e. Tree Shaking - eliminowanie martwego kodu (jak sobie poradzić z lodash) f. Jak sobie poradzić z rozmiarem Moment.js g. Cache - czyli jak cache'ować assety h. Brotli - alternatywna forma kompresji do gzip i jak zintegrować to z nginx i apache2 i. @babel/plugin-transform-runtime

Czyli jak w krótkim czasie ograniczyć rozmiar ładowanych assetów o kilkadziesiąt procent.

erykpiast commented 4 years ago

Super temat! Kilka pomysłów:

kvas-damian commented 4 years ago

Cieszę się że komuś przypadł do gustu. Kilka pytań odnośnie sugestii:

Module replacement, masz na myśli hot module replacement?
Aliasy - dasz jakiś przykład w jakiś sposób można tym wpływać na wielkość bundle'a?
Przez osobną paczkę masz na myśli osobny entrypoint? Czyli code-splitting?
Tree shaking chcę pokazać jak działa i co daje. Raczej nie chciałem wgłębiać się w side-effecty - może zabraknąć czasu
babel transform runtime - dobry pomysł

erykpiast commented 4 years ago

Module replacement i/lub aliasy - to, że możesz zastąpić zależności mniejszymi modułami z kompatybilnym API, nie tylko w swoim kodzie, ale także używanych zależnościach. Jak na przykład przy aliasowaniu Reacta przez Preact albo wyrównywania niekompatybilnych o patch wersji jakiejś głębokiej zależności
- Osobna paczka pod ES6 - ten sam entrypoint, inne ustawienia Babela (bez transpilacji albo z częściowo wyłączoną), wynikowo mniejszy kod dla nowszych przeglądarek, większy dla starszych
- Three shaking - to wystarczy 👍

kvas-damian commented 4 years ago

Interesujące... ;) Muszę przyznać że jeszcze mnie tam nie było. Zgłębię tematy i poruszę podczas talka.

Dzięki za pomysły!

naugtur commented 3 years ago

cześć @kvas-damian Odżywamy po pandemii. Temat aktualny?

kvas-damian commented 3 years ago

@naugtur aktualny. Daj znać jak będziemy mieli wolnego slota na talka o performance

naugtur commented 3 years ago

Właśnie ogłosiłem meet.js Poznań na 23 września. Wbijasz? :D @kvas-damian