[sometwo]

Od jakiegoś czasu zastanawiam się jak najlepiej zoptymalizować ilość request'ów do plików js/css. Powiedzmy w kodzie developerskim mam 30 plików js/css, które ostatecznie chce skonkatenować/minifikować tak by, któraś z przeglądarek jak najszybciej je pobrała.

Wstępnie myślę, żeby osobno dać kobyły jak bootstrap, jquery, czy datatables natomiast custom'owe pliki tak połączyć by było ich max 10 o podobnym rozmiarze.

Ktoś, coś? Jakieś doświadczenia w tym temacie?

#webdev #frontend #javascript #webpack #gulp

[N.....y]

@sometwo: generalnie to zacznij od tego, żeby bootstrap, jquery, czy datatables było na cdn. Nie umieszczaj tego w swoich bundlach.
To jak to rozwiążesz w dużej mierze zależy też od skali projektu (w sensie odwiedzalnosci). Skorzystaj tez z narzedzi które wywalą ci nieużywane style z wynikowego css. Z doświadczenia wiem, że takich śmieci potrafi się nazbierać w pewnym momencie

[CoffeeBreak]

@sometwo: Ja bym zrobił to tak. Zrobił jeden plik, np. style.css, który by importował wszystkie pozostałe cssy. Następnie odpaliłbym gulpa, żeby zminifikować ten jeden plik. Gotowe. Podobnie z jsem.

[sometwo]

@Niestabilny: zdaje sobie sprawę z takiej możliwości i podjąłem decyzję żeby zrezygnować z CDN, ale można by na produkcji eksperymentalnie zarzucić i zanalizować później ; >

[N.....y]

@CoffeeBreak: jeden styl i import niewiele zmieni nadal przeglądarka musi pobrać wszystko w kilku wątkach zamiast w na przykład jednym

[N.....y]

@sometwo: ja generalnie staram się wszystko umieszczać w jednym pliku. Jeden plik z js i jeden z css plus CDN z takimi bootstrapami. Staram sie też, żeby pliki wynikowe zawierały tylko to co potrzebne i były maksymalnie zminifikowane.
Rezygnacja z cdn to głupi pomysł. Odwiedzający odwiedza różne strony i dzieki temu w swoim cache najpewniej ma juz ten plik. Po co ma go ponownie pobierać?

[xtedek]

@sometwo: @Niestabilny: ja to zrozumiałem tak, że @CoffeeBreak chce gulpem zminifikować wszystko do jednego pliku. Ja lubię takie rozwiązanie - środowisko developerskie ma wszystko rozbite na małe pliczki, a dopiero potem gulp robi mi produkcję z jednym zminifikowanym cssem i jsem, najlepiej z dodaną wersją w nazwie pliku, żeby cache się ładnie odświeżał. Jeśli nie ma zależności w projekcie to jest to najprostsza z optymalizacji.

[N.....y]

@xtedek: no tym właśnie mówię. Ale jemu chyba chodzi o bundle produkcyjny. Chce zminimalizować ilość pobieranych plików. Chyba, że nie rozumiem czegoś :D

[CoffeeBreak]

@xtedek: @Niestabilny: Na produkcję wrzucić jedynie style.css.min i drugi plik z mapami, żeby dało się to ładnie okiełznać w inspektorze :D

[N.....y]

@CoffeeBreak: a po co mapy na produkcji? ( ͡° ͜ʖ ͡°)

[CoffeeBreak]

@Niestabilny: A dlaczego nie?

[N.....y]

@CoffeeBreak: bo to zbyteczne. Można tylko po co skoro lokalnie ma cały projekt i nad nim pracuje :)

[CoffeeBreak]

@Niestabilny: no ok. Argument brzmi rozsądnie:)

[N.....y]

@CoffeeBreak: mapy i tak są dopiero pobierane po otwarciu konsoli deweloperskiej więc nie powodują dłuższego czasu ładowania (sama informacja o mapie jest raczej pomijalna). To tak jakby ktos to czytał i zastanawiał się czy mapy powodują wydłużenie czasu ładowania strony( ͡° ͜ʖ ͡°)

[Krall]

@sometwo ja sobie bundluje wszystko w jeden plik, uglify, minifikacja. Style to cssinjs, wssytskie grafiki stałe lecą url-loaderem. Tylko czcionki ciągnę z cdn i dynamiczne grafiki typu Avatar.