Za pomocą narzędzi do śledzenia i analizowania pakietu Webpack
Nawet jeśli skonfigurujesz pakiet internetowy tak, aby aplikacja była jak najmniejsza, musisz go śledzić i wiedzieć, co zawiera. W przeciwnym razie możesz zainstalować zależność, która spowoduje, że aplikacja 2 razy będzie większa – i nawet tego nie zauważy.
W tej sekcji opisujemy narzędzia, które ułatwiają zrozumienie pakietu.
Monitorowanie rozmiaru pakietu
Aby monitorować rozmiar aplikacji, podczas programowania korzystaj z panelu webpack-dashboard, a w CI – bundlesize.
panel-pakietu internetowego
Parametr webpack-dashboard wzbogaca dane wyjściowe pakietu internetowego o rozmiary zależności, postępu i innych szczegółów. Wygląda to tak:
![Zrzut ekranu przedstawiający dane wyjściowe panelu pakietu webpack](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=9&hl=pl)
Ten panel ułatwia śledzenie dużych zależności – jeśli je dodasz, natychmiast zobaczysz je w sekcji Moduły.
Aby włączyć tę funkcję, zainstaluj pakiet webpack-dashboard
:
npm install webpack-dashboard --save-dev
Dodaj wtyczkę do sekcji plugins
konfiguracji:
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
lub compiler.apply()
, jeśli korzystasz z serwera deweloperskiego opartego na szybkiej kopii:
compiler.apply(new DashboardPlugin());
Możesz śmiało korzystać z panelu, aby znaleźć miejsca, które warto poprawić. Możesz na przykład przejrzeć sekcję Moduły, aby znaleźć biblioteki, które są za duże i można je zastąpić mniejszymi odpowiednikami.
rozmiar pakietu
bundlesize sprawdza, czy zasoby pakietu internetowego nie przekraczają określonych rozmiarów. Zintegruj ją z CI, aby otrzymywać powiadomienia, gdy aplikacja stanie się za duża:
![Zrzut ekranu przedstawiający sekcję CI żądania pull w GitHubie. Wśród narzędzi CI są dane wyjściowe w pakietach](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=9&hl=pl)
Aby je skonfigurować:
Więcej informacji o maksymalnych rozmiarach
Zoptymalizuj aplikację tak, aby była jak najmniejsza. uruchomić kompilację produkcyjną;
Dodaj sekcję
bundlesize
dopackage.json
z tą treścią:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
Wykonaj polecenie
bundlesize
za pomocą polecenia npx:npx bundlesize
Spowoduje to wydrukowanie rozmiaru każdego pliku w formacie gzip:
PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
Dodaj po 10–20% do każdego rozmiaru, a uzyskasz maksymalne rozmiary. Marża 10-20% pozwoli Ci normalnie tworzyć aplikację i ostrzegać, gdy jej rozmiar za bardzo się zwiększy.
Włącz
bundlesize
Zainstaluj pakiet
bundlesize
jako zależność programistyczną:npm install bundlesize --save-dev
W sekcji
bundlesize
w tabelipackage.json
określ maksymalne rozmiary betonu. W przypadku niektórych plików (np. obrazów) warto określić maksymalny rozmiar na typ pliku, a nie dla każdego pliku:// package.json { "bundlesize": [ { "path": "./dist/*.png", "maxSize": "16 kB", }, { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
Dodaj skrypt npm, aby uruchomić sprawdzanie:
// package.json { "scripts": { "check-size": "bundlesize" } }
Skonfiguruj CI do wykonywania
npm run check-size
przy każdym przekazaniu push. (oraz zintegrowaćbundlesize
z GitHubem, jeśli tworzysz na niej projekt).
To wszystko. Jeśli uruchomisz teraz npm run check-size
lub wypchniesz kod, zobaczysz, czy pliki wyjściowe są wystarczająco małe:
![Zrzut ekranu pokazujący rozmiar pakietu. Wszystkie wyniki kompilacji są oznaczone](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=9&hl=pl)
W przypadku niepowodzenia:
![Zrzut ekranu pokazujący rozmiar pakietu. Niektóre wyniki kompilacji są oznaczone jako „Niepowodzenie”.](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=9&hl=pl)
Więcej informacji
Przeanalizuj, dlaczego pakiet jest taki duży.
Możesz dokładniej przyjrzeć się pakietowi, aby zobaczyć, które moduły zajmują w nim miejsce. Poznaj narzędzie webpack-bundle-anlyzer, które:
webpack-bundle-analyzer skanuje pakiet i tworzy wizualizację jego zawartości. Użyj tej wizualizacji, aby znaleźć duże lub niepotrzebne zależności.
Aby korzystać z tego narzędzia, zainstaluj pakiet webpack-bundle-analyzer
:
npm install webpack-bundle-analyzer --save-dev
dodaj wtyczkę do konfiguracji pakietu internetowego:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
i uruchomić kompilację produkcyjną. Wtyczka otworzy stronę statystyk w przeglądarce.
Domyślnie strona statystyk pokazuje rozmiar przeanalizowanych plików (tzn. liczbę plików widocznych w pakiecie). Warto porównać rozmiary plików gzip, ponieważ jest to lepsze rozwiązanie dla użytkowników. Aby je zmienić, użyj paska bocznego po lewej stronie.
Oto czego szukać w raporcie:
- Duże zależności. Dlaczego są tak duże? Czy istnieją mniejsze usługi alternatywne (np. Preact zamiast React). Czy używasz całego kodu, który zawiera (np. Moment.js zawiera wiele języków, które często nie są używane i można je pominąć)?
- Zduplikowane zależności. Widzisz tę samą bibliotekę w wielu plikach? (Użyj na przykład opcji
optimization.splitChunks.chunks
w pakiecie webpack 4 lubCommonsChunkPlugin
w pakiecie internetowym 3, aby przenieść ją do wspólnego pliku). A może pakiet zawiera wiele wersji tej samej biblioteki? - Podobne zależności. Czy są jakieś podobne biblioteki, które pełnią mniej więcej taką samą funkcję? (np.
moment
idate-fns
lublodash
ilodash-es
). Spróbuj korzystać z jednego narzędzia.
Zapoznaj się też ze świetną analizą pakietów pakietów internetowych Seana Larkina.
Podsumowanie
- Użyj aplikacji
webpack-dashboard
ibundlesize
, aby na bieżąco sprawdzać rozmiar aplikacji - Dowiedz się, co zwiększa rozmiar dzięki
webpack-bundle-analyzer