この記事はニコニコ生放送のフロントエンドのアプリケーションにRspackを導入にあたって直面した問題やその解決策について時系列でまとめたものです。 以前書いた既存のアプリケーションに Rspack を導入しようとして失敗した話の記事と重複するところもありますが、記事を書いた時点では達成できなかった本番環境での実践投入を果たすにあたって新たな試行錯誤もあったのでリライトという形で本記事を書いています。 why Rspack? ニコニコ生放送のフロントエンドではWebpackを利用して成果物を生成しているのですが、ビルドの遅さによって開発体験が悪化しており、その改善策を模索していました。 問題の改善策として、以前にViteを導入することで開発時のビルド速度の改善を試みたことがあったのですが、css modulesのcomposesという機能で読み込んだscssがcssとして取り扱われてしまう問
プロダクトのビルドツールを webpack から Rspack に移行したので、その経緯と注意点をまとめます。 🦀 Rspackとは？ Rustで書かれた高速なJavaScriptのバンドルツールです。 webpackエコシステムとの強力な互換性を持ちます。 2024/08/24にv1.0.0がリリースされました。 🤔 なぜRspackに移行したのか？ ビルド速度改善のため以前からwebpackの移行を検討していましたが、プロダクトがwebpack依存の構成[1]で、Viteやその他のビルドツールへの移行が少し面倒でした。 Rspackであればwebpackのプラグインもそのまま動き移行が容易、かつ速度改善が見込まれるためRspackへの移行を選びました。 💡 移行方法 移行方法は、rspackの公式ドキュメントの migrate from webpack をそのまま参考にして進めま
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
Module Federation とは Module Federation は Webpack 5 からコア機能として導入されました。 Module Federation を使用すると、異なる JavaScript アプリケーションから動的にコードをロードすることができます。これは複数の個別のビルドによって単一のアプリケーションを構築する手段を目的としています。 これはマイクロフロントエンドという言葉でよく知られていると思いますが Module Federation の目的としてはそれに限定されません。 マイクロフロントエンドとは？ マイクロフロントエンドについてうまく説明できる自信はないので説明は委ねます。 マイクロフロントエンドアプリケーションを作成する それでは、実際に Module Federation を使ってアプリケーションを作成してみましょう。 例として、以下の3つのフロン
It has been nearly 2 months since webpack 5 was officially released. Due to the sponsoring situation, we couldn't devote as much time to webpack as we would like to. Speaking only for myself (@sokra), I enjoyed the little break and have worked on a few side projects. Ironically, while I was using webpack 5 and all its bleeding-edge features (asset modules, worker support, persistent caching), I di
In this blog post I will show how to write a Webpack loader. We will load Markdown files, will find a JavaScript code block inside and will return it to be processed by the rest of the pipeline. Initial setup Markdown to HTML Import statements Per-import loader Our Markdown loader Bundling extracted JavaScript code Imagine we have a Markdown text file, and it has JavaScript code blocks like this:
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? webpackを ^4.44.0 -> ^5.0.4にマイグレーションしましたので、 その際の作業の覚書です。 migrationの仕方 https://webpack.js.org/migrate/5/ 基本的に上記の公式を読みつつ、エラーが出たらその都度エラー文を元に対応していく形で進めました。 元々のwebpackの設定にもよって対応も変わってくるかと思いますが、 主要な変更箇所と実際に私が変更した箇所を紹介しておきます。 loaderとuseの厳格化 【参考】 https://blog.hiroppy.me/entry/webp
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
When I talk to friends and relatives about what I do at Etsy, I have to come up with an analogy about what Frontend Infrastructure is. It’s a bit tricky to describe because it’s something that you don’t see as an end user; the web pages that people interact with are several steps removed from the actual work that a frontend infrastructure engineer does. The analogy that I usually fall to is that o
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
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 application orchestration at runtime. What I hope will provide a new era for how we build apps at s... 目的 アプリケーションを
These days, you have to use a module bundler like webpack to benefit from a development workflow that utilizes state-of-the-art performance optimization concepts. Module bundlers are built by brilliant people just to help you with these difficult tasks. In addition, I recommend using a starter kit or a modern boilerplate project with webpack configuration best practices already in place. Building
Chrome is collaborating with tooling and frameworks in the JavaScript open-source ecosystem. A number of newer optimizations were recently added to improve the loading performance of Next.js and Gatsby. This article covers an improved granular chunking strategy that is now shipped by default in both frameworks. Introduction Like many web frameworks, Next.js and Gatsby use webpack as their core bun
This is the JavaScript bundler equivalent of what Apollo did with GraphQL.A scalable solution to sharing code between independent applications has never been convenient, and near impossible at scale. The closest we had was externals or DLLPlugin, forcing centralized dependency on a external file. It was a hassle to share code, the separate applications were not truly standalone and usually, a limi
概要 Webpackを使ってNode.jsとブラウザに両対応したライブラリを作るときのレシピ集です いろいろなレシピを見てWebpackによるライブラリ生成の挙動を理解することを目的としています ブラウザにもNode.jsにも両対応したライブラリを作りたい ブラウザとNode.jsに両対応したいとおもったとき、 両方同時に対応した1つのバンドルjsを作る【統合型】と、 ブラウザ用、Node.js用と別々にライブラリを出し分ける【出し分け型】の2パターンある。 本稿では主に**【統合型】**について説明する ライブラリのビルドに関するWebpack設定項目 レシピ集に行く前に、 まず、ライブラリのビルドに関する設定項目をざっくりみていく。 webpack.config.js 以下のような典型的なwebpack.config.jsの中でoutput以下の項目でライブラリ生成のためのパラメータを
IntroA few months back I was tasked with upgrading my team’s React build configuration to Webpack 4. One of our main goals was to take advantage of tree-shaking, where Webpack strips out code that you’re not actually using to reduce your bundle size. Now, the benefits of tree shaking will vary depending on your codebase. Because of several architectural decisions in ours, we had a LOT of code bein
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
