turbopack vite webpackの比較おすすめ(モジュールバンドラーの種類)

「モジュールバンドラ」、「ビルドツール」、「JavaScriptバンドラ」、「フロントエンドビルドツール」と呼ばれるものの覚書です。

目次

turbopack vite webpackのの比較おすすめ(モジュールバンドラーの種類)

これらのツールは、JavaScriptやCSS、画像などの静的リソースを一つまたは複数のバンドルにまとめる役割を果たします。また、依存関係の解決、トランスパイリング(ES6以上のJavaScriptをES5に変換するなど)、ミニファイケーション(コードの圧縮)、console.logの削除などのタスクも行います。

Webpackは非常に成熟しており、多くのプラグインとローダーが利用可能で、高度にカスタマイズ可能です。しかし、設定が複雑で、ビルド速度が遅いという欠点があります。WebPackはたくさん人が使っているためサポートは続くでしょうが、Tobias Koppersさんは、Next.jsを開発するVercelに移籍してTurbopackの開発に力を入れていることは確かです。基本的に開発終了の流れでしょうから、新規では使いたくありません。

Viteは開発時のホットモジュールリプレースメントが非常に高速で、設定が簡単であるという利点があります。また、ビルド時にはRollupを使用しているため、小さなバンドルサイズを実現できます。ViteのライセンスはMITライセンスです。開発者はVueの開発者であるEvan You(イヴァン・ヨー)さんです。美術大学卒業してGoogleに入った少し変わった経歴ですね。その後、Vue、Viteと開発しています。

Turbopackは新しいツールで、Rustで開発されており、ビルド速度の向上と大規模なアプリケーションに対する対応力が強化されています。しかし、まだβ版の段階であり、全ての機能が完成していません。turbopackはMPLライセンスです。ソースコードの変更を公開する必要があるという条件が付いていますが、それ以外は自由に使用、コピー、修正、マージ、公開、配布、サブライセンス設定、そして/または販売することができます。開発者はTobias Koppersさん。

turbopack vite の口コミ

turbopackがviteより10倍早いとでていましたが、マーケティングはヤバいことが話題になっていましたね。

 it’s often better to listen to the creators/developers than aggresive marketing departments.

https://github.com/yyx990803/vite-vs-next-turbo-hmr/discussions/8

この意見には同意です。

現実的に開発されているアプリケーションのモジュール数を考えた場合、両者の性能を比較してTurbopackがViteよりも非常に優れている、と結論づける根拠がない。

https://recruit.gmo.jp/engineer/jisedai/blog/turbopack-vs-vite/

静かなるインターネットでもVitestを使っていますね。

ライブラリとしてはVitestとReact Testing Libraryを使っています

https://zenn.dev/catnose99/articles/f8a90a1616dfb3

個人的にもviteにしました。

個人的にもviteにしました。Turbopackの開発状況は今度注視していく必要があるでしょう。

Viteとesbuild

JSの圧縮とconsole.logのみであれば、esbuildがよさそうです。esbuildとViteは別物ですが、Viteはesbuildを含んでいます。

esbuildでCSSのPNGパスエラー

JSと一緒にCSSも圧縮しようと思ったのですが、CSS内にPNGパスがあるとエラーで通りませんでした。

loaderを設定すると、通るのですけど、出力先に画像がコピーされてしまいます。やりたいこととちょっと違います。

loader: {
  '.png': 'file',
},

無視してくれればいいのです。ignore: [‘.png’],みたいなのがいないかと思ったらありました。externalだったため気付きにくかったです。

external: ['*.png'],

参考!

The solution to this is to pass *.png as external as indicated:

https://github.com/evanw/esbuild/issues/800

You can mark a file or a package as external to exclude it from your build. 

https://esbuild.github.io/api/#external

取り去るというのはCSS内ではなく、画像を生成でず取り去るみたいなニュアンスでしょう。圧縮されたCSSはpngは残っていたので。

you can use *.png to remove all .png

https://esbuild.github.io/api/#external

こちらはGPT4君では解決できず、自力解決。少し難しいものはやっぱこうなりがちですね。ぐぐりましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次