次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
Rspackチームはwebpackの性能向上にも取り組み、将来はwebpackの中にRspackを組み込んでいく試みも表明
Rspackチームはwebpackの性能向上にも取り組み、将来はwebpackの中にRspackを組み込んでいく試みも表明 この記事の中で大事なポイントを紹介していなかったので、補足させてください。 Rspackは、Rustで書かれているおかげで高速に起動し、インクリメンタルコンパイルとHot Module Replacement（HMR）など、大規模なプロジェクトでも高速なビルドを可能にする機能なども搭載しており、すでに開発元であるByteDance社内では実際に使われ始め、5倍から10倍の性能向上を実現していると説明されています。 Rspackはまだバージョン0.1.0であり今後もさらに機能追加と性能向上が行われていく予定ですが、今後、Rspackチームはwebpackの性能改善にも取り組み、将来ある程度Rspackが成熟してきた時点で、webpackにRspackを統合する試みがある
ありがとう Webpacker さようなら Webpacker - クラウドワークス エンジニアブログ
こんにちは。crowdworks.jp における技術的負債の解消をリードするジャンヌチームです。 12 月ということでアドベントカレンダーの時期ですね。今年も弊社で開催しており、合計 25 名が参加して盛り上げております。 qiita.com ジャンヌチームからは @okuto_oyama が今年のフロントエンド活動の振り返りをしていました。 engineer.crowdworks.jp その中の１つに「Webpacker から Simpacker + webpack 構成へ」というものがあり、今回はそれに関する取り組みを紹介していきます。 Webpacker とは Webpacker は Rails アプリケーションにおける webpack でのフロントエンド開発をするときに用いる公式ライブラリです。このライブラリの利点として webpack のビルドシステムに詳しくなくとも汎用的な設定
Recoilとwebpack.DefinePluginと環境変数の名前 - 私が歌川です
これは React Advent Calendar 2022 7日目の記事です。 Recoilを使っているアプリケーションでWebpackのDefinePluginを使って環境変数の値をビルド時に埋め込むとき、Webpackの設定によっては環境変数の名前がビルドしたコードに含まれてしまう場合があります。 具体的には、以下のようにDefinePluginの process.env キーに対してobjectを渡す場合に発生しえます。 new webpack.DefinePlugin({ 'process.env': { FOO: JSON.stringify(process.env.FOO), }, }); ここでRecoilのコードを見てみましょう。ランタイムに process.env の値を参照するコードがあるのに気づくと思います。 github.com optional chaining
Introducing Turbopack: Rust-based successor to Webpack – Vercel
Vercel's mission is to provide the speed and reliability innovators need to create at the moment of inspiration. Last year, we focused on speeding up the way Next.js bundles your apps. Each time we moved from a JavaScript-based tool to a Rust-based one, we saw enormous improvements. We migrated away from Babel, which resulted in 17x faster transpilation. We replaced Terser, which resulted in 6x fa
Webpack5 Module Federation で始めるマイクロフロントエンド
Module Federation とは Module Federation は Webpack 5 からコア機能として導入されました。 Module Federation を使用すると、異なる JavaScript アプリケーションから動的にコードをロードすることができます。これは複数の個別のビルドによって単一のアプリケーションを構築する手段を目的としています。 これはマイクロフロントエンドという言葉でよく知られていると思いますが Module Federation の目的としてはそれに限定されません。 マイクロフロントエンドとは？ マイクロフロントエンドについてうまく説明できる自信はないので説明は委ねます。 マイクロフロントエンドアプリケーションを作成する それでは、実際に Module Federation を使ってアプリケーションを作成してみましょう。 例として、以下の3つのフロン
[意訳]グローバルCSSの終焉 - Qiita
このポストは以下の記事の意訳です。 The End of Global CSS 何か間違いなどありましたら、ご指摘いただけると幸いです。 (以下、訳) CSSセレクタはすべて同じグローバル空間に存在しています。 CSSに触れた人は皆、以下のような見解に至っていることでしょう。 CSSの考えはドキュメントの時代に設計されたもので、今ではモダンなウェブアプリケーションのためのマトモな開発環境を提供することが困難であると。 全てのセレクタには意図しない副作用を起こす可能性があり、期待と違う要素にスタイルが適用されてしまったり、他のセレクタと競合してしまったりします。さらに驚くべきことに、セレクタはグローバル空間で詳細度の競争に負けることもあり、ページのデザインに全く影響を持たなくなることだってあり得るのです。 CSSファイルを変更する時はいつでも、スタイルが適用されるグローバル空間について慎重に
![[意訳]グローバルCSSの終焉 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c757e023bab11accd2b67800760d1b68891bcb05/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUUzJTgyJUIwJUUzJTgzJUFEJUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFCQ1NTJUUzJTgxJUFFJUU3JUI1JTgyJUU3JTg0JTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05ZjhlNzI1NGU3NzdjNWJmNDI3NjkyZGJhZTAyMTExNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0NzA5OTdmMTUwMmIzOTNhZmZjMzdjZTY5MmZmOWNm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc8a4ce04ff8cd9a18219fdb1f99d9c0a)
Node.js v17 で webpack error - Qiita
digital envelope routines::unsupported Node.js が v17 になって以降（2021年10月19日） 、webpack (v5) で次のようなエラーがでるようになりました。 Webpack in development mode [webpack-cli] Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) ... <anonymous>:6:1) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initializatio
React + Webpack: ChunkLoadError: Loading chunk X failed.
Loading chunk 6 failed. (missing: https://WEB_SERVER.com/82fbafaa3a.CHUNK_NAME.js)Getting this error message? Follow this detailed guide to fully understand the problem and fix it. It is not happening randomlySometimes none of your users encounter the error for a few weeks. Sometimes your logs report that several users faced it within a few hours. This looks random, right? It is not. You get this
webpackに関してよかったニュースとそれに対する感想 - hiroppy's site
注意: これは公式見解ではない、ただ 1 メンバーの感想文です。 最近の大きなニュースとしては、webpack の主要メンバーの 2 人(Sokra, Alexander)は現在 vercel 雇われたことです。 これによりメンテナンスの安定度が増したことは確かでしょう。現状の問題点はメンテナ不足です。webpack ですら深刻です。 例えば今日、障害が発生している mini-css-extract-plugin は一人で開発しているためレビュワーがいません。この 2 年ぐらいずっとこのような感じです。 npm dependency is breaking some React apps today — here's the fix Tons of users are reporting their Facebook Create React App builds are failing
Native ESM 時代のフロントエンドビルドツールの動向
No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
Lazy Load Routes in Vue with webpack Dynamic Comments | CSS-Tricks
The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I use this little tip all the time in my own work. A repo that includes everything covered in this post
webpack@5の主な変更点まとめ - hiroppy's site
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
webpack@5で入るModule Federationについて - hiroppy's site
Module Federation(以下 mfe)は webpack@5 から入る新しい仕組みの一つです。 Proposal Merge Proposal: Module federation and code sharing between bundles. Many builds act as one · Issue #10352 · webpack/webpack This is a proposal to merge my existing work into the Webpack core. The base concept is federated ap... 目的 アプリケーションを作る時に、webpack はビルド時のソースコードは使う前提で実行するので、様々な最適化を行うことができます。 もし、node_modules 経由以外でライブラリを使うという場合は scrip
webpack のコード分割の初歩 - 30歳からのプログラミング
JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、バンドルせずに公開してしまうとパフォーマンスに悪影響を与える可能性がある。 numb86-tech.hatenablog.com ファイル数が増えれば増えるほど影響は深刻になるため、依存関係が深いライブラリを使っている場合などは、レイテンシが飛躍的に増加してしまう。 そのため、バンドルせずに公開するのは現実的ではない。 バンドルしてひとつのファイルにまとめてしまえば、JavaScript のダウンロードは一度で済む。 しかしそうすると今度は、バンドルファイルの肥大化という問題が発生する。 巨大なフ
"module"フィールド対応 · Webフロントエンド パフォーマンス改善ハンドブック
"module"フィールド対応 パッケージはBundleを配布しないで重複した依存ライブラリは削減できました。 Tree Shaking webpack、rollup.js、ParcelといったBundlerではTree shakingと呼ばれる不要なコードを削除する仕組みを実装しています。 Tree Shaking Reduce JavaScript Payloads with Tree Shaking | Web Fundamentals | Google Developers Tree Shakingはモジュール間の構造を静的に解析して（副作用がない）不要なコードを削除する手法です。 Tree Shakingを行うには、モジュール間の依存関係を静的に解析できるようにしなければなりません。 CommonJSで広く使われているrequire()とmodule.exportsでのモジュール
webpack@5で入るPersistent Cachingについて - hiroppy's site
webpack/lib/config/defaults.js 実際に使うときの設定 結論ですが、webpack.config.js へ以下のように書くことが推奨されます。 module.exports = { cache: { type: "filesystem", buildDependencies: { config: [__filename], }, }, }; あとは、各コードの設定に依存するためversion等の追加が必要になる可能性があります。 ドキュメント Other Options | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... 仕組み ファイルキャッシュでは以下のようにデフォルトではnode_m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Turbopack
Swizzling | Docusaurus