[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
Rails+React環境下における、Hot Module Replacementの導入 - stmn tech blog
はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内の静的アセットを配信することができます。また、HMRとはWebpackの提供する仕組みで、ブラウザのリロードをせずにJavascriptの変更内容を画面に反映するツールです。 弊社のプロダクトであるT
個人サイトのビルドツールをwebpackからViteに移行した - valid,invalid
個人サイト https://ohbarye.github.io/ のビルドツールをwebpackからViteに移行した。 まぁ、移行と大げさに言っても、元々vanilla JSとSassでちょっと動きと装飾を付けただけのペライチページなのだけど。 実質ただのリンク集 理由 State of JS 2021のビルドツール部門でViteが1位になっていたが利用したことがなく気になっていたため。手元にある最小のフロントエンドプロジェクトが個人サイトだったのでplaygroundとして試してみた。 https://2021.stateofjs.com/en-US/libraries/build-tools より Viteとは Vite公式を斜め読みした。ランキング中だと経験あるビルドツールがwebpack, Parcel, Rollupあたりで止まっていたのでそこからの差分で理解すると... es
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
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 に結合してくれます 課題(
Vite は webpack に比べてなにがすごいの??
概要 Viteとwebpackを比較し、それぞれの概要・概念・内部処理の違いをざっくりと理解できます！(おそらく) なお、本記事では具体的な設定方法は書いていませんので、ご了承ください。 この記事を読むと分かること 以下の疑問を解決できます。(多分) webpackってそもそもなんだっけ？ Viteってなんぞ？ Viteとwebpackって何が違うの？ Viteが良いとは聞くけど、実際なにが良いの？ ざっくり結論 Viteがwebpackと比較して優れている点は主に以下の通りです。 高速ビルド Viteは、開発速度を重視して設計されており、開発サーバーが標準で組み込まれているため、開発時にブラウザのリロードを行わなくても、保存したら即反映されるため、開発速度が向上します。 高速HMR（Hot Module Replacement） Viteは、HMR[1]が標準搭載されており、尚且高速。
話題のesbuildをさっくりと調査してみた - Qiita
う〜ん、とはいえみなさん、ビルドツールってなんか地味な印象ありませんか？私はそうでした。 ビルドツールといえば、フロントオタクがwebpackをゴリゴリチューニングしたり、rollupなどの色々ツールがあるもいまいち根本的にビジネスメリットがあるわけでもないし、 下手に手を出すと技に溺れやすい世界だし(公式ドキュメントにシンプルに保ちなさい的なこと書いてあるよね！)、第一最適化はフレームワークに任せればいいじゃん！っと考えていました。 しかし、今回注目したいesbuildはまさにフロントエンドの次の時代を作ってくれる様な、「すごい」ツールであるとキラキラとした期待を寄せてしまいます。 esbuildとは webpackなどに変わるフロントエンドのコード変換+バンドルツールで、なんとWebpackと比較して10-100倍速度が早いそうです。 これが本当だとすると、フロントの開発効率は根本的に
【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法 | Enjoy IT Life
Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブ（操作可能）なページを生成する過程のことをいいます。Hydrationはクライアントサイド（ブラウザ）で実行されます。 Hydrationの定義と役割については、Next.js『Pre-rendering and Data Fetching#Pre-rendering』に記載されている説明と図も参照してください。 Next.jsの公式ドキュメントでも説明されている通り、HydrationというプロセスはPre-renderingの有無に関わらず実行されます。 Next.js（Pre-rendering）におけるHydrationの過程について Next.js（Pre-rendering）のHydrationではページをインタラクティブにする処理に加
React ユーザー向けの Next.js ガイド
最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。 つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材 とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、 ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか 元々は SSR のための煩雑な手続きをしなくてい
freeeプロジェクト管理でJavaScriptバンドルサイズ削減に取り組んだ話 - freee Developers Hub
こんにちは！ 中部オフィスでエンジニアをやっているichienです。 5月に入社してfreeeプロジェクト管理の開発を担当していました。 今回はfreeeプロジェクト管理のJS(JavaScript)バンドルサイズを削減した話を紹介します。 改善前はバンドルしたJSファイルが5MB以上に肥大化しておりダウンロードに数秒かかっていました。 その分、ファーストビューの表示もその分遅くなり、ユーザ体験に課題がありました。 今回は次の3つの施策を実施して、5MB→1.7MBまで削減し、ダウンロード時間も70%短縮できた話をします。 gzip圧縮の適応 webpack-bundle-analyzerで現状の可視化と削減対象の決定 不要な日付・祝日データの排除 また、今回の取り組みは一度にすべて対応したわけではありません。次の様にstep-by-stepで進めることを意識しました。 現状を可視化し理解
State of JS 2020
2020年と同じように、JavaScriptはなんとかして前進しました。Optional ChainingやNullish Coalescingなどの新機能のおかげで言語自体も成長を続けていますし、TypeScriptの普及は、静的型付けを普及させることで、物事をまったく別のレベルに引き上げています。 そしてフレームワークの面では、落ち着いたと思ったところにSvelteが現れ、フロントエンドに新たな手法を取り入れることで全てを揺るがしています。そしてビルドツールにおいても、数年にわたるWebpackの覇権の後、新しい傾向が見られるようになりました。 しかし、これまでと今回の違いは「古い」もの–相対的に言って–が、どこにも行ってないことです。SvelteとSnowpackはよいものですが、それはReactとWebpackも同じです。そして確かに、それらは最終的に偉大なJavaScript C
「Angular」「React」「Vue」の3大フレームワークに集約 ICSの代表が教える「フロントエンド技術」のトレンド
「キャッチアップしておきたいウェブ制作の最前線」というテーマで、Vue.jsなどJavaScriptを駆使したユーザーインターフェイスの開発を主に担当してきた池田泰延氏が、Webのフロント周りの近年の技術的な動向を解説します。前半はフロントエンド技術のトレンドについて。 スピーカー自己紹介、『JavaScript コードレシピ集』を出版 池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こ
Next.js と Gatsby の比較（ 2020 年 5 月時点）
この記事は 2020 年時点の古い記事です。現在は状況が大きく異なっているためご注意ください。 最近 React ベースのフレームワークである Next.js と Gatsby を使っています。 ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と Gatsby の比較情報をまとめてみました。 これからどちらを使うか・学ぶか迷っている方のご参考になれば幸いです。 あくまで私が知る範囲での説明であり 100% の正確さを保証するものではないのでその点にご留意ください。 尚、本記事は Next.js と Gatsby が以下のバージョンが最新のときに書いています。 Next.js 9.4.1 Gatsby 2.22.3 いずれも活発に開発が行われており、バージョンが進むとあてはまらなくなる記述も出てくるものと思います。 「そもそもスタティックサイトジェネレーターって何
複数のモジュール形式(CommonJS, ES Modules, UMD)をサポートしたnpmパッケージの作り方 in TypeScript - dackdive's blog
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJS 形式 (module.exports / require() ) ブラウザ環境で、webpackやRollupなどのモジュールバンドラーを前提とするならば CommonJS や ES Modules 形式 (export / import ) ブラウザ環境で、モジュールバンドラーなどは使わず<script>タグでファイルを読み込んで利用するならば UMD 形式 このとき、パッケージ提供側はどういったファイルをパッケージに含めるべきなのか、またそれを TypeScript でどのように実現できるのかがあまりよくわかっていなかったので
Webpackの入門書
Webpack入門書です。 ReactやVueでプロジェクトを立ち上げてしまえば、Webpackは設定済みのままプロジェクトが作成されますので、Webpackについては全く知らずに使っているという方も多いのではないでしょうか。 Webpackはちゃんと使うことでBundleサイズの削減、ひいてはパフォーマンスの向上が期待できます。 今回はそこまで踏み込んだ内容ではありませんが、Webpackについての最低限ここまで知っていればいいだろうという知識を集約しました。 Webpackの公式サイトは日本語に対応していないので、こちらに目を通していただければWebpackについての基本を抑えることができます。
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
# CommonJS と ES6の import/export で迷うなら - Qiita
はじめに いつもはes6のモジュール管理方式であるimport/export(ES modules)を使って、npmで手に入れたライブラリや自分で作成したモジュールをロードしているが、たまに思った挙動にならないことがある。また、export defaultしたモジュールをテストしようとしてkarmaでrequire()するとエラーになったりした。そういう場合は、とりあえずmodule.exportsを使ってみるとうまくいったりすることが多いのだが、なぜなのかはあまり考えていなかった。 ということで、実際にはどうなっているのか、またモジュールシステムとは何なのかという点で基本的なことから理解を深めて、es6のimport/exportとの違いを知り、より正しく実装できるようになれば良いと思っている。 結論としては 方針としては基本的にはES6形式で記述するが、CommonJS形式の読み書きが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Serverless FrameworkでLambda Layerを導入！node_modulesをLayer化してコールドスタートを軽減しましょう😎」低コストなモダナイズ開発の実践 | Ragate