すべては問題ありませんが、縮小と他の最適化のために、バンドルを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:どうしてデボルブをしたのかが突然おもしろくなったら- ビデオはこちらです。