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

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



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



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



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







アイデア



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





開発ブラウザはここにあるので、非同期/待機、ジェネレータ、クラス、矢印関数などがあります。 一般に、 ターゲット: babelのesmodules
あなたのことは知りませんが、私はこの考えが好きです。 ここにあるのは、まだ私たちの中にある古いブラウザだけです。この考えはそのようには適合しません。 (したがって、私たち全員が生産でes5を鳴らし、半メガバイトのポリフィルで調味します)



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



デボリューション



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



要するに:





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





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





もう一度:





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



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



github.com/thekashey/devolution

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



All Articles