devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Narzędzia
Home›Narzędzia›webpack 5.0 zoptymalizowany, z wieloma nowościami

webpack 5.0 zoptymalizowany, z wieloma nowościami

By Bernadeta Zapała
12 października 2020
108
0
Share:

webpack jest kompilatorem modułów JavaScript. Czwartą wersję udostępniono na początku 2018 roku i od tego czasu wydawane były wyłącznie aktualizacje tej wersji. Twórcy publikowali przede wszystkim nowe funkcje, bez przełomowych zmian. Jednak nadszedł czas wprowadzenia nowej głównej wersji – webpack 5.0. Zawiera ona poprawki w budowie narzędzia oraz funkcje, których nie można zaimplementować bez nich.

Znaczenie webpack 5.0

Wydanie głównej wersji jest okazją do zmiany domyślnych ustawień oraz dostosowania ich do nadchodzących usprawnień. Wiele funkcji pojawi się w kolejnych wydaniach, nowa wersja nie jest jeszcze kompletna. Jest to wyłącznie wprowadzenie niezbędnych, przełomowych zmian.

Ogólne zmiany

Nowa wersja skupia się przede wszystkim na poprawie wydajności kompilowania. Jest to możliwe dzięki trwałemu buforowaniu. Poprawiono także długotrwałe buforowanie, korzystając z lepszych algorytmów i wartości domyślnych. webpack 5.0 zapewnia także zgodność z platformami internetowymi. Jednak co najważniejsze – wyczyszczono wewnętrzne struktury, które podczas wprowadzania funkcji w wersji webpack 4, pozostały niedopracowane.

webpack 5.0 logo

Długoterminowe buforowanie w webpack 5.0

Narzędzie wprowadziło kompromis między rozmiarem pakietu a długoterminowym buforowaniem. Do nowego wydania dodano nowe algorytmy, przypisujące krótkie identyfikatory numeryczne do modułów i fragmentów. Przypisują również dwuznakowe nazwy do eksportu w sposób deterministyczny.

Inna funkcja – moduleIds/chunkIds/mangleExports: false – wyłącza domyślne zachowanie, przez co zapewnia się niestandardowy algorytm za pośrednictwem wtyczki.

Teraz webpack korzysta z prawdziwego skrótu zawartości pliku podczas używania [contenthash]. Wcześniej używał wyłącznie skrótu wewnętrznej struktury. Ma to pozytywny wpływ na długoterminowe buforowanie, ponieważ zmieniane są tylko komentarze lub zmienne.

Optymalizacja webpack 5.0

Jednym z kolejnych ulepszeń jest usprawnienie akcji treeshaking podczas ponownego eksportowania obiektów przestrzeni nazw. Webpack śledzi teraz dostęp do zagnieżdżonych właściwości eksportu. W poniższym przykładzie eksport b można usunąć w trybie produkcyjnym.

// inner.js
export const a = 1;
export const b = 2;

// module.js
export * as inner from './inner';
// or import * as inner from './inner'; export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);

Kolejną przeprowadzoną optymalizacją jest analiza symboli w module, aby ustalić zależności od eksportu do importu. Jest to możliwe dzięki opcji optimization.innerGraph, włączonej w trybie produkcyjnym.

Wsparcie rozwoju

Jeden z nowych algorytmów – identyfikator fragmentu, nadaje nazwom plików i fragmentom czytelne nazwy. Określany jest on na podstawie ścieżki względem pliku context. Kolejną funkcją jest „Federacja modułów”. Dzięki niej możliwe jest współdziałanie wielu kompilacji pakietu internetowego.

Nowe funkcje platformy internetowej

Pierwszą zmianą jest zgodność modułów JSON z propozycją. Moduły przekazują teraz ostrzeżenie, jeśli używany jest eksport inny niż domyślny. Dla modułów aktywów webpack posiada teraz natywne wsparcie. Emitują one plik do folderu wyjściowego.

Podsumowanie

Nie jest to wszystko o nowej wersji webpack 5.0. Pełna dokumentacja jest także dostępna na oficjalnym blogu narzędzia. Aby ułatwić migrację z wersji 4 do najnowszej, wydano także przewodnik po migracji.

TagsJavaScriptwebpackwebpack 5.0

Share:

  • BuckleScript 8.1
    Języki programowania

    BuckleScript 8.2 z funkcją typów literałów łańcuchowych

  • Systemy i przeglądarki

    Web Capture – nowa funkcja testowana w Edge Canary

  • CSS logo
    Frontend

    Nadchodzące właściwości CSS – przegląd lipca

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

  • 24 listopada 2020

    Tailwind CSS 2.0 z narzędziami kontroli tekstu

  • 20 listopada 2020

    Angular 11 – stabilne wydanie platformy

  • 19 listopada 2020

    Chakra UI React v1 wydany z ulepszeniami

  • 19 listopada 2020

    Chrome 87 z szybszym startem i zmianami w kartach

  • 18 listopada 2020

    Silnik WebKit w przeglądarce Safari 14

  • 17 listopada 2020

    Poznańska konferencja POZITIVE TECHNOLOGIES 2020 platformą wymiany wiedzy i doświadczeń najlepszych specjalistów IT

  • 16 listopada 2020

    Babylon.js 4.2 z edytorem cząsteczek i Babylon React Native

  • 13 listopada 2020

    Apple Silicon M1 i MacBooki – spotkanie One More Thing

  • 12 listopada 2020

    .NET 5.0 Microsoftu z poprawioną wydajnością

  • 12 listopada 2020

    Windows Terminal 1.5 Preview z nowymi funkcjami

  • 10 listopada 2020

    GIMP 2.99.2 – pierwszy krok do głównej wersji

  • 6 listopada 2020

    iOS 14.2 dostępny z nowymi emotikonami

  • 6 listopada 2020

    Node.js 15.1.0 – pierwsza aktualizacja stabilnego wydania

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT