次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
「Webpack」より700倍高速な次世代バンドルツール「Turbopack」が登場
2022年10月25日に、フロントエンドフレームワーク「Next.js」の最新版である「Next.js 13」がリリースされ、同時にバンドルツール「Webpack」の後継となる「Turbopack」も発表されました。開発元のVercelは、Turbopackについて「Webpackよりも700倍高速」とアピールし、性能を示すベンチマーク結果を公開しています。 Introducing Turbopack, the successor to Webpack. ◆ ~700x faster than Webpack ◆ 10x faster than Vite ◆ Native incremental architecture built with Rust ◆ Support for React Server Components ◆ Support for TS, JSX, CSS & mo
Next.jsで作ったブログのパフォーマンス改善 | みどりのさるのエンジニア
はじめに 年末年始にこの技術ブログを GatsbyJS から Next.js にリプレースを行っていました。その影響でLighthouseのパフォーマンス結果が低下してしまったので、原因の調査と改善を実施しました。 原因調査 Lighthouseの結果を考察 Lighthouseの詳細を見てみると 722.4kb という巨大なJSファイルが配信されていました。「Potential Saving 99.8kb」とあるように、このJFファイルの中の大部分が未使用コードになっています。 また巨大なjsファイルによりJavaScriptの「Script Evaluation」が 1,835ms と、長時間のレンダリングブロッキングが発生していました。 Webpack Bundle Analyzer 先ほどのLighthouseの結果で問題になっていた、巨大なjsファイルは chunks/pages
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
