Pytania odnośnie bundlowania modułów w JavaScript

pytanie zadane 3 lutego 2020 w JavaScript przez Artek Stary wyjadacz (11,800 p.)

Zagłębiłem się w temat webpacka, modułów i bundlowania. Nie mogę skumać do czego bundlowanie jest potrzebne znalazłem np. taki tutorial w którym opisano to w ten sposób :

To illustrate, imagine you are building a web application, which is made up of multiple JavaScript files. You add JavaScript files into html via script tags:

<html>
  <script src="/src/foo.js"></script>
  <script src="/src/bar.js"></script>
  <script src="/src/baz.js"></script>
  <script src="/src/qux.js"></script>
  <script src="/src/quux.js"></script>
</html>

Each file requires a separate http requests, which is 5 round trip requests in order to get your application started. So it would be better if you can combine all 5 files into 1:

<html>
  <script src="/dist/bundle.js"></script>
</html>

No i niby wszystko fajnie, tylko do czego to jest potrzebne skoro równie dobrze mogę dodać jeden tag <script>

i w nim napisać taki kod.

import example from './foo.js';
import someAlias1 from './bar.js';
import someAlias2 from './baz.js';
import someAlias3 from './qux.js';
import someAlias4 from './quux.js';

I też będę miał jeden plik. Więc w czym bundlowanie jest lepsze?

1 odpowiedź

odpowiedź 3 lutego 2020 przez Comandeer Guru (600,810 p.)
wybrane 3 lutego 2020 przez Artek

Najlepsza

W tym, że zamienia importy na kod konkretnych modułów. To są wszystkie te pliki złączone w jeden, co sprawia, że wystarczy wykonać jedno żądanie HTTP zamiast kilku.

W przypadku wrzucenia importów do jednego pliku sytuacja jest jeszcze gorsza, bo najpierw musi zostać pobrany ten plik, a dopiero potem mogą się rozpocząć kolejne importy.

komentarz 3 lutego 2020 przez Artek Stary wyjadacz (11,800 p.)

Chwilę potem jak napisałem to też sobie pomyślałem, że pewnie chodzi o to, że trzeba pobrać te pli foo, bar, baz itd.

Czyli wychodzi na to, że po zbundlowaniu tak na dobrą sprawę nie mamy do czynienia z modułami tylko czymś co symuluje ich działanie. Jak rozumiem stosowanie modułów na produkcji też jest raczej niewskazane.

komentarz 3 lutego 2020 przez Comandeer Guru (600,810 p.)

To wszystko zależy. Używanie pojedynczych modułów połączone z agresywną strategią cache'owania pozwala na inny typ optymalizacji (np. podmianę części aplikacji bez ruszania reszty). Zawsze najlepiej poeksperymentować i wybrać najlepsze rozwiązanie dla naszego przypadku.

komentarz 3 lutego 2020 przez Artek Stary wyjadacz (11,800 p.)

Fajnie, dzięki za odpowiedź. A jak byś wytłumaczył fakt, że skoro umieszczanie skryptów w jednym pliku jest dobre to dlaczego nawet jeżeli podglądam kod źródłowy youtube to widzę część skryptów porozrzucanych w kilku plikach, a część osadzonych bezpośrednio w kodzie strony? Jest jakiś powód ku temu? Tak na dobrą sprawę podglądam kod wielu różnych stron już od dłuższego czasu i na wielu witrynach jest podobnie. Niekiedy nawet kilkanaście plików ze skryptami.

komentarz 3 lutego 2020 przez Comandeer Guru (600,810 p.)

Wrzucone bezpośrednio do kodu HTML nie powodują żadnych żądań HTTP, więc są w miarę "tanie". Jeśli chodzi o YT, to tutaj dochodzi jeszcze jedna kwestia: oni nie muszą się starać ;) Poza tym AFAIR YT właśnie szedł w agresywny cache poszczególnych części kodu – może to jest powód.