破壊-建物ではありません。 またはデボルブ

最近、いくつかの興味深い記事がHabréに登場しました。 1つ目はES6ミニ フィケーションの問題、2つ目は一般的なWebpack最適化のヒントに関するものです。

すべては問題ありませんが、縮小と他の最適化のために、バンドルをES6とES5に分割する問題を回避しました。 そして一般的に、 それについて記事を書いたり書いたりする人もいますが 、他の人（ほとんどすべて）はこのテクニックを無視しています。

長い間。 高価な それほどそうではありません。

しかし、それは迅速に、安価に、そして愚かに必要です。 おそらく、あなたはただ進化を逆にするべきです。

アイデア

「アイデア」を記述することは良い考えではありません。 どのように機能するかを説明する方が良いでしょう。 バンドル形成プロセスの仕組み：

• 私はコードを持っています
• 「開発」ブラウザでコンパイルします
• そしてそれはすべて動作します。

開発ブラウザはここにあるので、非同期/待機、ジェネレータ、クラス、矢印関数などがあります。 一般に、 ターゲット： babelのesmodules 。

あなたのことは知りませんが、私はこの考えが好きです。 ここにあるのは、まだ私たちの中にある古いブラウザだけです。この考えはそのようには適合しません。 （したがって、私たち全員が生産でes5を鳴らし、半メガバイトのポリフィルで調味します）

そして、それはまさに修正が必要なものです。

デボリューション

Devolutionは、ターゲットにコンパイルされたバンドルを取得する小さなcliユーティリティです。esmodulesをes5に分解し、必要なすべてのポリファイルを途中で追加します。

要するに：

• すべてのjsスクリプトは
• 必要なポリファイルを定義する1つのアクティブなプラグイン（fork useBuiltins：“ usage”）を使用してbabelを実行します。 変換がないため、これは高速です。
• 各ファイルについて、必要なすべての親友が収集され（既にメインバンドルに含まれている親友を除く）、マージされ、terserを介して実行され、ファイルの先頭に追加されます。
• 各ファイルはswcを介して実行されます。swcは、コードをIE11が理解できるレベルにアップグレードする、さびバージョンのbabelです。 バベルよりも10〜60倍高速です。 さまざまなプラグインをサポートしていませんが、これは必要ありません-必要なのは__すでに適用されています__。
• terserは結果に再び重ねられますが、マングルがオフになっている（名前の圧縮）ので、これも高速です。
• これらはすべてワーカーで行われます。

異なる難易度の3つのプロジェクトでコードを実行しました。

• プロジェクト1、60の最終的なjsファイル（コード分割）。 ビルド時間400秒。 デボリューション30代。
• プロジェクト2、1つの最終jsファイル（30 MB）。 ビルド時間120秒。 デボリューション10秒。
• プロジェクト3、1つの最終jsファイル（2mb）。 ビルド時間20秒。 Devolution 5s（労働者の開始時に多くのものがあり、失われます）。

ESMバンドルからのボーナスは少し奇妙でした：

• 1つのプロジェクトで400kbのバベル/ポリフィルが失われました。 そこでは「オーバー」ブラウザチップは使用されませんでした。また、「esm」では、洗練される必要はありません。
• ジェネレーター、非同期/待機、クラスコンストラクターのコードがはるかにコンパクトであるため、1つのプロジェクトが10％失われました。
• 「ゆるい」バベル変換によりコードがよりコンパクトになることがあるため、1つのプロジェクトが大きくなりました。 ただし、「ES6」コードは「安全」ですが、ルーズモードは少し危険なオプションです。

もう一度：

• ES6コードを使用します（より正確にはesmodule、let / constは速度のためにvarに置き換えられます）
• ES5で構成
• 愛好家の側に投げる
• パパに散らばり、他のファイルにシンボリックリンクを追加
• スクリプトのページへの接続を少しスマートに変更します（IE11モジュール/ nomoduleは理解しません）
• 完了-カスタムメーターの85％のESM、タンク内のES5。

シンプル。 早く。 ただばか。 バンドルをアップグレードしました。 古いブラウザ！ Au-提供しています。

まあ、新しいブラウザは、ポリフィルがほとんどないバンドルを受け取り、ジェネレータとasync / awaitのひどい変換をせずに、タンバリンのない矢印関数を使用します（そして、一般に高速です）。 一般的に、誰もが幸せです、これは元々意図されていたようです。

github.com/thekashey/devolution

PS：実際のところ、現時点ではデボルーションはswcを使用していません。コードが動作しないことがあるためです-github.com/swc-project/swc/issues/280、Babelはそれほど遅くありません-swcが修正されました20秒で、バベルは1分でできます。 「通常の」ビルド時間-5以降-これは大きなプラスです

PS：どうしてデボルブをしたのかが突然おもしろくなったら- ビデオはこちらです。