「モジュールバンドラ」、「ビルドツール」、「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
この意見には同意です。
最近 Next.js をあまり積極的に利用したくない理由の1つは、 Vite と Vitest の体験が良すぎて Vercel が提案する SWC/Turbopack に浸れないところがある
— Jaga Apple (@jagaapple_tech) December 7, 2023
フレームワークレベルで Vite を採用できると、テストも Storybook も爆速駆動＆同じ設定を共有できる明確なメリットがある
うーん、ViteかTurbopackと思いつつ。
— 野良ぬこ＠副業フリーランス (@noranyanko13) October 8, 2023
Turbopackはまだ時期尚早、Viteは触ってみたけどやはりまとめる派。
Hugoはassets配下からSCSSの場所を変えれないが…そこさえ我慢すれば…いやいや。
やっぱ静的サイトジェネレーターとバンドルツール両方で使い分けないと駄目か？…いやいや。
『りあクト！』第4版をリリースしました。React 18 に対応、ツールチェーンを Vite に刷新し、Hooks ファーストで内容を再構成。
— 大岡由佳『りあクト! 第4版』BOOTHで販売中！紙本も (@oukayuka) September 9, 2022
Deno や Preact、Zustand といった新技術も解説しています。またフォームやディレクトリ構成などについても追加しました。2年ぶりの大幅改訂。https://t.co/u3DaoC0vkH
現実的に開発されているアプリケーションのモジュール数を考えた場合、両者の性能を比較して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を含んでいます。
書きましたー！
— null (@418unused) June 16, 2020
[Web フロントエンド] #esbuild が爆速すぎて #webpack / Rollup にはもう戻れない | Kabuku Developers Bloghttps://t.co/iFc3C5hk0B #TypeScript #Preact
esbuildでCSSのPNGパスエラー
JSと一緒にCSSも圧縮しようと思ったのですが、CSS内にPNGパスがあるとエラーで通りませんでした。
loaderを設定すると、通るのですけど、出力先に画像がコピーされてしまいます。やりたいこととちょっと違います。
loader: {
'.png': 'file',
},無視してくれればいいのです。ignore: [‘.png’],みたいなのがいないかと思ったらありました。externalだったため気付きにくかったです。
external: ['*.png'],参考！
The solution to this is to pass
https://github.com/evanw/esbuild/issues/800*.pngas external as indicated:
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
https://esbuild.github.io/api/#external*.pngto remove all.png
こちらはGPT４君では解決できず、自力解決。少し難しいものはやっぱこうなりがちですね。ぐぐりましょう！
コメント