BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Webpack 5の紹介

Webpack 5の紹介

原文(投稿日:2020/10/20)へのリンク

最も人気のあるJavaScriptモジュールバンドラーであるWebpackのバージョン5.0がついにリリースされ、多くの改善が行われた。ビルド時間の短縮、バンドルサイズの縮小、多くの重大な変更である。

Webpack 4.0のリリース後、チームは重大な変更を回避し、小さな段階的な改善に焦点を合わせた。これにより、進行が遅くなり、下位互換性を確保するために多くの小さなねじれが加えられることがよくあった。

Webpack 5.0では、いくつかの中核的なアーキテクチャ上の決定を再考し、次の重要な領域に焦点を当てている。

  • 永続キャッシングと長期キャッシングを活用することによるパフォーマンス向上
  • 改善されたアルゴリズムのデフォルト
  • より優れたツリーシェイクとコード生成を使用したバンドルサイズの改善
  • Webプラットフォームとの互換性の向上
  • 永続キャッシングによるビルドパフォーマンスの向上
  • より優れたアルゴリズムとデフォルトによる長期キャッシングの改善
  • より良いツリーシェイクとコード生成によるバンドルサイズの改善
  • Webプラットフォームとの互換性の向上
  • 奇妙な状態のままになっている内部構造のクリーンアップ。一方でv4では重大な変更をすることなく機能実装する。
  • 重大な変更をする将来の機能に対する準備。これによって可能な限りv5を使い続けることができる。

長い改善リストの中で、2つの重要な変更がJavaScriptコミュニティの注目を集めた。モジュールフェデレーションとNode.js APIポリフィルに対するデフォルトの動作の変更である。

Webpack 5.0までは、Node.js APIは自動的にポリフィルされていた。これは、元々Node.jsを対象としていたNPMパッケージ(したがって、Node Package Managerという名前)がWebブラウザでスムーズに実行され続けることを保証するために行われた。

時間の経過とともに、NPMはクライアントアプリケーションに最適なパッケージマネージャーになった。最近のパッケージの多くは、特にWebブラウザを対象としており、多くの場合、Node.jsポリフィルが冗長になっている。

この変更によりパッケージサイズが小さくなり、ほとんどの場合、ユーザには表示されない一方で、すべてのNode.jsパッケージで独自のポリフィルを追加する必要がある。そうしないと、Webブラウザでパッケージが破損するリスクがある。一部のパッケージ開発者が[軽くは受け入れていない]シナリオである。(https://blog.sindresorhus.com/webpack-5-headache-b6ac24973bf1)。

[モジュールフェデレーション](https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669)をWebpack 5.0に追加すると、アプリケーションは、実行時に別のアプリケーションからコードを動的にインポートできる。

この機能は、マイクロフロントエンドアーキテクチャを使用する開発者にとって特に重要である。マイクロフロントエンドアーキテクチャとは、大規模なアプリケーションをそれぞれ独自のフレームワークを使用して個別のモジュールに分割するものである。

個々のモジュールがコードを動的に共有できるようにすることで、バンドルサイズと読み込み時間を大幅に削減できる。これは、マイクロフロントエンドの最大の課題の1つを解決する。

完全な変更ログは[リリースノート](https://webpack.js.org/blog/2020-10-10-webpack-5-release/)にある。 WebpackはMITライセンスの下でリリースされている。開発者は、[投稿ガイドライン](https://github.com/webpack/webpack/blob/master/CONTRIBUTING.md)および[行動規範](https://github.com/openjs-foundation/code-and-learn/blob/master/CODE_OF_CONDUCT.md)に従って、Webpackに貢献するように招待されている。

この記事に星をつける

おすすめ度
スタイル

BT