È finalmente arrivato. Ed è bellissimo.

webpack 3: Rilascio ufficiale !!

Scope Hoisting, "commenti magici" e altro!

Dopo aver rilasciato Webpack v2, abbiamo fatto alcune promesse alla comunità. Abbiamo promesso che avremmo fornito le funzionalità per cui hai votato. Inoltre, abbiamo promesso di consegnarli in un ciclo di rilascio più rapido e stabile.

Niente più beta di un anno, nessuna rottura tra i candidati al rilascio. Abbiamo promesso di farti da solo, la community che fa prosperare il webpack.

Il team di Webpack è orgoglioso di annunciare che oggi abbiamo rilasciato Webpack 3.0.0 !!! Puoi scaricarlo o aggiornarlo oggi !!

npm install webpack@3.0.0 --save-dev

o con

filato aggiungere webpack@3.0.0 --dev

La migrazione dal webpack 2 a 3 non dovrebbe comportare alcuno sforzo oltre all'esecuzione dei comandi di aggiornamento nel tuo terminale. Abbiamo contrassegnato questo come un cambiamento importante a causa delle modifiche interne che potrebbero influire su alcuni plugin.

Finora abbiamo visto l'aggiornamento del 98% degli utenti senza alcuna funzionalità di rottura !!!

Cosa c'è di nuovo?

Come accennato, abbiamo mirato a fornire le funzionalità per cui hai votato! Grazie ai travolgenti contributi di GitHub, al supporto dei nostri sostenitori e sponsor, siamo riusciti a colpirli tutti.

Sollevamento dell'ambito

Scope Hoisting è la caratteristica principale del webpack 3. Uno dei compromessi del webpack quando il raggruppamento era che ogni modulo nel bundle sarebbe stato racchiuso in chiusure di singole funzioni. Queste funzioni wrapper hanno rallentato l'esecuzione del tuo JavaScript nel browser. In confronto, strumenti come Closure Compiler e RollupJS "sollevano" o concatenano l'ambito di tutti i moduli in un'unica chiusura e consentono al codice di avere un tempo di esecuzione più veloce nel browser.

Ad oggi, con Webpack 3, è ora possibile aggiungere il seguente plug-in alla configurazione per abilitare il sollevamento dell'ambito:

module.exports = {
  plugin: [
    nuovo webpack.optimize.ModuleConcatenationPlugin ()
  ]
};

Scope Hoisting è specificamente una funzione resa possibile dalla sintassi del modulo ECMAScript. A causa di questo webpack può ricorrere al normale raggruppamento in base al tipo di moduli che si sta utilizzando e ad altre condizioni.

Per rimanere informati su ciò che attiva questi fallback, abbiamo aggiunto un flag cli --display-optimisation-bailout cli che ti dirà che cosa ha causato il fallback.

Poiché il sollevamento dell'ambito rimuoverà i wrapper di funzione attorno ai moduli, è possibile che vengano visualizzati miglioramenti di piccole dimensioni. Tuttavia, il miglioramento significativo sarà la velocità con cui JavaScript viene caricato nel browser. Se hai dei paragoni fantastici prima e dopo, sentiti libero di rispondere con alcuni dati perché saremo onorati di condividerli!

"Commenti magici"

Quando abbiamo introdotto nel webpack 2 la possibilità di utilizzare la sintassi di importazione dinamica (import ()), gli utenti hanno espresso la loro preoccupazione di non poter creare blocchi con nome come se fossero in grado di richiedere.ensure.

Abbiamo ora introdotto ciò che la comunità ha coniato "commenti magici", la possibilità di passare il nome del blocco e altro ancora come commento incorporato alle dichiarazioni import ().

Sebbene queste siano tecnicamente funzionalità rilasciate in v2.4 e v2.6, abbiamo lavorato per stabilizzare e correggere i bug per queste funzionalità che sono arrivate in v3. Ciò ora consente alla sintassi di importazione dinamica di avere la stessa flessibilità di request.ensure.

Per ulteriori informazioni, consulta la nostra più recente guida alla documentazione sulla suddivisione del codice che evidenzia queste funzionalità !!!

Qual è il prossimo?

Abbiamo alcune funzionalità e miglioramenti che speriamo di offrirti !!! Ma per prendere il controllo di quelli su cui dovremmo lavorare, fermati alla nostra pagina dei voti e valorizza le funzionalità che vorresti vedere!

Ecco alcune di quelle cose che speriamo di portarti ancora:

  • Meglio costruire la cache
  • Build iniziali e incrementali più veloci
  • Migliore esperienza con TypeScript
  • Caching a lungo termine rinnovato
  • Supporto modulo WASM
  • Migliora l'esperienza utente

HanGrazie

Tutti i nostri utenti, collaboratori, scrittori di documentazione, blogger, sponsor, sostenitori e manutentori sono tutti azionisti che ci aiutano a garantire che il webpack abbia successo negli anni a venire.

Per questo, ringraziamo tutti voi. Senza di te non è possibile e non vediamo l'ora di condividere ciò che è in serbo per il futuro !!

Non hai tempo per contribuire? Vuoi restituire in altri modi? Diventa un sostenitore o sponsor del webpack donando al nostro collettivo aperto. Open Collective non solo aiuta a supportare il Core Team, ma supporta anche i collaboratori che hanno trascorso molto tempo a migliorare la nostra organizzazione nel tempo libero! ❤