Jeśli Twoja aplikacja jest dostępna bezpośrednio z Internetu, ważna może być optymalizacja zasobów. Dzięki dobrej strategii możesz zmniejszyć kosztowny ruch internetowy lub zwiększyć prędkość na niektórych klientach mobilnych lub brzegowych. W niektórych przypadkach wysoce zoptymalizowane strony mogą podnieść pozycję w wyszukiwarce Google. Sam Google ma dobrą dokumentację na temat optymalizacji treści i tego, dlaczego optymalizacja jest ważna.
Na kilka dni przed powstaniem webpacka gulp był narzędziem, z którego warto skorzystać, jeśli chcesz budować i optymalizować zasoby. Ale w 2019 r., jeśli tworzysz kątową aplikację internetową, możesz być szczęśliwy, że nie będziesz już pisać dużego i brzydkiego pliku gulpfile.js.
W czasach, zanim istniał pakiet internetowy, gulp był narzędziem, do którego warto było się udać, gdy trzeba było budować i optymalizować zasoby lub całe aplikacje. Ale w 2019 roku, jeśli tworzysz aplikację internetową Angular, może cię to uszczęśliwić, jeśli nie będziesz już musiał pisać dużego i brzydkiego pliku gulpfile.js.
Świat JavaScriptu rozwija się szybko. W chwili obecnej, gdy piszę ten artykuł, webpack jest najnowocześniejszym narzędziem do tworzenia nowych aplikacji internetowych, niezależnie od tego, czy piszesz aplikacje bez frameworków („VanillaJS” 👏), czy aplikacje Angular.
Świat JavaScriptu rozwija się szybko, ale ten artykuł o Webpacku jest najnowocześniejszym rozwiązaniem w zakresie tworzenia nowych aplikacji internetowych niezależnie od tego, czy piszesz aplikacje bez frameworków („VanillaJS” 👏), czy aplikacje Angular.
Webpack wykonuje świetną robotę i ma dużą społeczność. Jednak optymalizacja zasobów w Angularze jest trudna, ponieważ „angular cli po prostu kopiuje” je do folderu dist tak, jak są.
Webpack wykonuje świetną robotę i ma dużą społeczność. Jednak optymalizacja zasobów w Angularze jest trudna, ponieważ „angular cli po prostu kopiuje” je do folderu dist w niezmienionej postaci.
1. Wprowadź niestandardową konfigurację pakietu internetowego
npm i -D @angular-builders/custom-webpack
Ponieważ angular upuszcza polecenie ng eject w celu dostosowania konfiguracji pakietu internetowego, ten pakiet umożliwia wstrzyknięcie niestandardowej konfiguracji pakietu internetowego bez dotykania oryginalnej (przy okazji. wygląda to na bezpieczniejsze uaktualnienie). Przynosi także inne korzyści, takie jak mutacja pliku index.html i jest dobrze udokumentowana.
Po zainstalowaniu tego pakietu zmień buildery i dodaj customWebpackConfig do pliku angular.json i przejdź dalej.
"projects": {
...
"[project]": {
...
"architect": {
...
"[architect-target]": {
"builder": "@angular-builders/custom-webpack:[browser|server|karma|dev-server]",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
...
}
2. Zainstaluj wtyczkę preprocesora pakietu Webpack
Po pewnym zagłębieniu się w głęboką sieć w końcu znalazłem wtyczkę na github, która odpowiada moim potrzebom. Ponieważ wyświetla ostrzeżenie o wycofaniu, poprawiam kod, aby korzystać z nowego interfejsu API haków kompilatora webpack.
npm i -D @jkroepke/webpack-file-preprocessor-plugin
Po udanej instalacji możesz już teraz zoptymalizować swoje zasoby.
3. Utwórz plik webpack.conf.js
W pobliżu pliku angular.json utwórz nowy plik o nazwie webpack.conf.js. Podążanie za „przykładem z pakietu niestandardowego pakietu internetowego” pozwala dobrze zrozumieć, jak to działa.
Poniższy przykład pokazuje, jak skonfigurować wtyczkę preprocesora pliku webpack od góry:
4. Dodaj dodatkowych pomocników
Minify JSON to pierwszy dobry chwyt. Ale co z minimalizacją plików HTML lub SVG?
Potrzebujesz małych narzędzi pomocniczych, takich jak html-minifier, aby go zarchiwizować, a następnie dodaj WebpackFilePreprocessorPlugin po raz drugi, ale z inną konfiguracją:
Zrobione! — Gotowy do użycia przykład znajdziesz tutaj.
Cieszę się z pull requestów, aby dowiedzieć się, jak przetestować funkcjonalność wtyczki. Jeśli chcesz, możesz mi pomóc i oznaczyć repo gwiazdką.
