Jak wygląda organizacja katalogów w Waszych projektach, od strony front endu? Jak wygląda architektura? Ja organizuje katalogi np. tak:
- plugins
- libs
- pages
- components
app.js
Jeżeli chodzi o sam kod, to jest tam głównie inicjalizacja pluginów jQuery, podpięcie kilku callbacków pod zdarzenia, kilka żądań AJAX itp. Czyli raczej proste sprawy: bez konieczności używania np. takiego angulara. W katalogu /pages
trzymam natomiast pliki JS które zawierają kod wymagany dla danej podstrony serwisu. Może to być np. profile.js
, notifications.js
itp itd.
Do tego używam webpacka. Jeżeli jednak chciałbym połączyć wszystko w jeden plik JS, to wyjdzie z kilkaset kB po minifikacji. Trochę sporo. Wymyśliłem więc, że przy pomocy webpacka, mogę wczytywać kod potrzebny tylko na danej stronie (przy pomocy code splitting). Miałby tutaj zastosowanie wzorzec front controllera. Załóżmy, że plik app.js
jest wczytywany na każdej podstronie. Mógłbym w nim umieścić taki kod:
let page = $('body').attr('class');
require.ensure([], (require) => {
require(`./pages/${page}`);
});
Natomiast w kodzie HTML, danej podstrony - mógłbym np. napisać:
<body class="profile">
Dzięki temu, na podstronie /profile
dynamicznie wczytany byłby chunk utworzony przez webpacka.
Przechodząc do sedna: Czy to jest dobre rozwiązanie? Jak Waszym zdaniem powinna wyglądać organizacja katalogów, plików tego typu aplikacji? Jaką architekturę tutaj zastosować?
Póki co robię tak, że w webpack, ustawiam kilka entry i w szablonie HTML importuje dany plik w razie potrzeby:
<script src="/profile.js"></script>