[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
Vite にたどり着くまで（Webpack 以降のモジュールバンドラー振り返り）
Parcel Webpack は設定の記述に学習コストがかかるが、Parcel はそれが不要。 プロジェクトの規模感が見えていて、手軽にバンドルしたいなら Parcel を選択しても良さそう。 逆に細かい制御を入れたい場合は選択しないほうが良い。 Rollup Webpack は CommonJS（require/module.exports） をベースにバンドルを行うが Rollup は ES Modules（import/export） の仕組みを活かしてバンドルを行う。 ES Modules のほうがツリーシェイキングがやりやすくバンドル効率が高いらしい。 また、多くの記事で「アプリケーションには Webpack」「ライブラリには Rollup」を選択することを勧めている。 これは以下の理由が大きいと思われる。 全てのコードを同じ場所に置いて、一括で評価を行います。そのため、コードが
Module Bundlerの歴史を振り返って今採用すべきBundlerを考える
Module Bundler とは Module Bundler とは、多数の JavaScript コードファイルを 1 つに結合し、ブラウザーでの読み込みを可能にさせるツールです。 これから Module Bundler の歴史を振り返り、選定基準について私なりの考えを述べさせていただけたらと思います。 Browserify Browserify は 2010 年、最初に誕生した Module Bundler です。 2010 年当時、流行っていた Node.js をブラウザで使いたい requireを用いてブラウザで動かす JS をモジュール分割したい といったモチベーションの元で生まれました。 https://browserify.org/ 主な機能(Browserify) CommonJS(Node.js)で書かれたファイルをブラウザで読み込める JS に結合してくれます 課題(
話題のesbuildをさっくりと調査してみた - Qiita
う〜ん、とはいえみなさん、ビルドツールってなんか地味な印象ありませんか？私はそうでした。 ビルドツールといえば、フロントオタクがwebpackをゴリゴリチューニングしたり、rollupなどの色々ツールがあるもいまいち根本的にビジネスメリットがあるわけでもないし、 下手に手を出すと技に溺れやすい世界だし(公式ドキュメントにシンプルに保ちなさい的なこと書いてあるよね！)、第一最適化はフレームワークに任せればいいじゃん！っと考えていました。 しかし、今回注目したいesbuildはまさにフロントエンドの次の時代を作ってくれる様な、「すごい」ツールであるとキラキラとした期待を寄せてしまいます。 esbuildとは webpackなどに変わるフロントエンドのコード変換+バンドルツールで、なんとWebpackと比較して10-100倍速度が早いそうです。 これが本当だとすると、フロントの開発効率は根本的に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
