Webの状態:バンドルとビルドツール

Browserify以来、バンドルは非常に重要なWeb生態系にされている.彼らは自動的にコードを処理する能力を提供します.この記事では、バンドルの背景について説明します.

束の背景

バンドルの前のWeb

Webの大部分では、バンドルが存在しませんでした.スクリプトを含めるには、ほとんどの人だけでCDNCDNJS or Google Hosted Libraries . これは2009年にノードが変化し始めるでしょう.jsがリリースされました.代わりにcdns , nodeを使う.JSはパッケージマネージャー、NPMと一緒に来ました.NPMはすべてのライブラリが1つだけだったので使いやすいnpm install そして、更新は楽でした.使用の容易さのため、多くの人々は、NPMをウェブに使いたかったです.しかし、これまで不可能でしたBrowserify やって来た.

ブラウザー

Browserifyのタグライン自体かなりよく説明します.

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

Browserifyは最初のJavaScript“バンドルです.”あなたがバンドルが何であるかを知らないならば、それは1つのスクリプトに一緒に複数のスクリプトを束ねて、それが束のスクリプトの上でしばしば変形をするツールです.これは、構文解析によってNPMからコードを別のスクリプトをバンドルできますrequire() あなたのコードの声明.また、多くのHTTPリクエストが送信されていないため、あなたのサイトは頻繁に高速化されていました.これは、オーバーヘッドを減らしました(これはHTTP/2が単一の接続で複数のリソースをダウンロードする機能を追加するため、現代のブラウザでは少ないケースです).Browserifyはすぐにこれらの利点のために採用を得た.また、必要に応じてWeb上のモジュールを使用する他の方法に注意することも重要です.これはブラウザのためのNPMに完全に置き換えられています.

グラント＆ガップ

Browserifyは一緒にスクリプトを束ねることで素晴らしいですが、それはコードを変換するのと全く同じではありませんでした.JavaScriptにCodeSScriptコードをコンパイルしたいとしましょう.プレーンブラウザーでこれを行うことができます.しかし、それは扱いにくく、比較的柔軟性がありません.これを修正するには、実行中のコード変換にフォーカスしたWeb用のツールの新しいグループを設定します.これらは通常、タスクランナーと呼ばれ、最も人気のあるものですGrunt and Gulp . Gruntは最初のタスクマネージャで、最初は2012年1月にリリースされました.Browserifyやバンドルなしでバンドルを使用するときに、より柔軟なコード変換を可能にしました.しかし、ガットによって解決されたgruntにはまだ問題がありました.GLPは、一時的なファイルの代わりにノードストリームを使用し、並列にタスクを実行します.また、JSON設定ファイルの代わりにスクリプトを使用することを可能にします.これは、まだ2つの別々のツールを使用するのに迷惑だったので、まだ完璧ではなかった.これはwebpackによって修正されました

Webpack

Webpack バンドルとコンパイルの両方を組み合わせて、GLP + Browserifyの以前の標準より簡単になります.Webpackは、2016年に最初に人気を呼び始めました.また、webpackのいくつかの他の利点があります.まず、HTMLやCSSや画像のような非JavaScriptの資産を束ねて、変換します.第二に、APIはしばしば使いやすいです(最新のバンドルに対してまだ複雑ですが).CREATEのような多くのツールは、次のアプリを反応させる.JSとVuePressは、Webpackを使用します.

バンドルツール/ビルドツールが重要である理由

If you already know why bundlers are used, you can skip this section

最適化

一般に、ほとんどの人は以下のようにコードを書きません.

let l="hello";l+=" world!",l=l.repeat(5),console.log(l);

代わりに、読むことができるようにするには、おそらく次のように書くでしょう.

let text = "hello"
text +=" world! "
text = text.repeat(5)
console.log(text)

しかし、第1の例は、より小さく、したがって、より速く移される.今、読みやすさのためにサイズを犠牲にしなければならないと思うかもしれませんが、解決策、minifiersがあります.Minifiersは、あなたのソースコードをより小さな形に自動的に変えます.実際、最初のコード例はTerser , これは、最高の省庁の一つです.バンドルは、プラグインで簡単にミニファイラーを使用します.さらに、バンドルは、未使用のコードを削除するツリー揺れのような他の最適化を行うのを助けます.最後に、バンドルスクリプト自体が必要なHTTPリクエストを減らすことによってパフォーマンスを向上させることができます.

非Webネイティブ言語

多くの場合、言語のように使うのがより効率的ですSass or Stylus プレーンCSSの代わりに.または、おそらく使用しようとしているTypeScript コードで静的型付けを実施します.どのような場合でも、Webがネイティブにサポートしていない言語を使用することがよくあります.バンドルは、これを支援することができます.すべてをコンパイルするために別のコマンドの束を実行する代わりに、バンドルの設定ファイルにプラグインを追加することができます.

開発機能

ほとんどの近代的なバンドルは、ホットモジュールのリロード(HMR)のような高速反復を有効にする機能があります.HMRは自動的にページ全体ではなく変更された特定のモジュールを再読み込みし、再読み込みを高速化します.また、反応のようなフレームワークを使用している場合は、ページのデータが毎回リセットされないことを意味する反応状態を保存することができます.

モジュールの簡単な包含

モジュールを束ねることは、バンドルが作られた理由です.現在他にも多くの特徴がありますが、これはまだ重要です.ESMのネイティブのサポートでさえ、それはまだできるように役立つimport or require 完全なインポートパスを記述する必要がないモジュールimport maps これに役立つかもしれません).

ビルドツールの状態

採用

最近では、ほとんどすべてのWeb開発者は1つのバンドルまたは別を使用します.Webpackは、はるかに人気のある、とRollup and Vite で2番目と3番目.現在、VITPress、SveletKit、アストロ、および多くのようなフレームワークによって採用されているVITEは、最も成長の早い主要なバンドルです.

ECMAScriptモジュール( ESM )

ESMは最新のバンドルでサポートされています.BrowserifyのようなツールはESMをサポートしていませんが、ほとんどのツールはwebpackサポートESMより新しいか新しいものです.加えて、ESMはサポートされているバンドルのためのものを行うために推奨されている方法です.なぜなら、それはCommonJsやAMDよりも将来的であり、静的に木揺れのためのインポートを分析するのが簡単です.ESMはまた、私たちが以下をカバーするunbunled開発の機会を開きます.

アンバンドル開発

UnBallled開発は、超高速の開発体験を提供するブラウザでネイティブESMのサポートを利用しています.開発中のすべてを束ねる伝統的なバンドルとは異なり、アンバンドルされた開発はコードを変換し、コードをバンドルすることなくECM準拠のファイルパスにインポートパスを書き直します.加えて、ほとんどのバンドルは、これが必要とされる輸入の数を減少させます、そして、依存関係はしばしば変わることがありません.unbunled開発を利用する2つの最も顕著なバンドルVite and Snowpack . スノーパックは、2019年に作成され、アンバンドルされた開発経験を持って最初のバンドルされました.しかし、雪パックはしばらくの間人気がありましたが、これは永久に続きませんでした.2020年に、Vueの後のチームは、Viteをつくりました.VITEは、使いやすさ、速度、より良い最適化とより多くのように、雪パックの上に多くの利点を持ちます.さらに、Sveletkitのような人気のプロジェクトは、雪パックの代わりにViteを採用しました.これらのすべては、ダウンロードでViteパススノーパックを助けたmore than 10x downloads 積雪に比べれば.実際にはAstro , 雪だるまの背後にあるチームによって作成されたプロジェクトは、アストロについての記事を探すために、今ではViteを使用しています.全体的に、あなたが速く、unbunled開発を望むならば、私はVITEを推薦します.

高速言語

多くの人々がバンドルとコード変換をスピードアップしようとしているもう一つの方法は、囲碁や錆のようなより最適化された言語を使用することです.現在、これを行う2つの最も顕著なツールはesbuild and SWC . ESBuildはエゴウォレスで2016年にGOを使用して作成されました.ESBuildは、Javascript、TypeScriptコンパイラ、ターサー、および基本的にすべての他のツールよりもはるかに高速だった1つのパッケージのすべてのバンドルを変換するには、Babelの役割を果たした.SWCはKDY 1によって2017年に作成されました.SWCはほんの少しだけであるが、esbuildよりも速い.ESBuildは現在SWCより人気があり、VITEのようなプロジェクトによって使用されます.jsはswcを採用した.

ゼロからゼロへの設定

Webpackには、不正な複雑なプラグインシステムがあります.それは非常に強力ですが、それは初心者のための怖いことができます.幸運にも、これに集中するより新しいバンドルがあります.Parcel Devon Govettによって2017年に作成され、簡単に設定できます.小包は、あなたが何かをすることを必要とせずに、SASS、TypesScript、およびJSXのような機能のwebpackプラグインの多くをサポートしています.さらに、キャッシュとさびの増加使用のために、小包V 2はwebpackより速くありえます.VITEは別の低設定のバンドルですが、それはあまりにも箱からはしません.

Webpackはどうですか？

Webpackはまだ最も人気のあるバンドルです.それは上に指定された大規模な速度の改善の機能を活用していないが、それはまだ最新のバージョンでは、新機能を追加している、Webpack 5.Webpack 5で追加された最大のものはmodule federation , またはマイクロフロントエンド.モジュール連盟はウェブサイトの異なる要素を分離し、コンポーネントライブラリのようなコードの共有を容易にします.もう一つの大きいものWebpackはバージョン5で加えられます.全体的に、Webpackはまだ進んでいます、しかし、それはある特徴でいくつかのバンドルの後ろに落ちています.

結論

Webバンドルの世界は急速に進んでいる.うまくいけば、この記事はあなたにバンドルのために現在起こっていることの概要を与えました.この記事が好きなら、byteofdevメーリングリストにサインアップしてくださいhere (または、そうしないでください、しかし、私はあなたがすることを望みます🙃), そして、ありがとうございます.