Fast StartupCombining TypeScript and Rust with a parallelized architecture to bring you the ultimate developer experience.
Rspack
Fast StartupCombining TypeScript and Rust with a parallelized architecture to bring you the ultimate developer experience.
Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ
こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。 今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。 まとめ ビルド時間が長いことが課題で移行を行い、結果として開発体験・デプロイ時間等が大幅に改善されました。 開発環境のみの移行 → フィーチャートグルでの本番試験 → リリース → Webpack の廃止と、移行は段階的に進めました。 なぜ Webpack をやめたのか 一番はやはり、ビルド時間の遅さです。 今回、当時の環境を再現することが難しく、改めて計測はできなかったのですが、本番用のビルドはおおよそ3~4分、開発環境での watch ビルドで変更が反映 (HMR)
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る 複数のJavaScriptやTypeScriptの依存関係などを解決し、コードやフォント、画像などのリソースなどをまとめるバンドルツール（あるいはモジュールバンドラやビルドツールなどとも呼ばれます）は、多数のライブラリやコンポーネントなどを用いてチームで開発するWebアプリケーションの開発には欠かせないツールとなっています。 そのバンドルツールの代表がwebpackです。約4万人のITエンジニアによるアンケート結果が示された「State of JavaScript 2022」でもwebpackはGulpやViteなどを抑えて最も人気のあるバンドルツールとなっています。 参考：「State of JavaScript 2022」公開。利用
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
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
import * as 構文とパフォーマンス最適化 - Qiita
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
Turbo
Make Ship HappenTurbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.
JavaScript エコシステムを維持する OSS の努力と課題
JSConf JP 2021 の基調講演として発表したスライドです。 https://jsconf.jp/2021/talk/javascript-maintaining-ecosystem-oss-struggles-and-challenges
1枚岩なMPAプロダクトでWebpackのマルチエントリーをさらにグルーピングしてビルドする - メドピア開発者ブログ
Noita世界の理不尽をこの身をもって体験した末にバウンドルミナスで全てを切り刻んでクリアしました、フロントエンドグループの小宮山です。 以前からこれできたらいいのになぁと思いながら無理そうと諦めていた掲題の事柄を実現できた嬉しさの勢いのままに書き始めています。 状況 1枚岩なMPAプロダクトがどういうものかというと、 ルーティングをRails側で管理するMPA（複数エントリーポイント） 異なる種別のユーザー向けシステムが複数内包されている という構成です。 ルーティングについては要するにSPAではなく、ページ毎のhtmlファイルとmain.jsがあるということです。 異なる種別というのは、要するにユーザー向け画面と管理者向け画面が分かれているような状況です。場合によっては3種類、4種類以上の異なるシステムが内包されたりもします。BtoBtoCなサービスだったりする場合ですね。 課題感 こ
webpack v5がリリースされたので、現状をまとめてみた
10/10 に webpack v5 がリリースされたので、今回は変更点や気をつけたい点をまとめてみました。 プロダクションで使うのはまだ早いかも(2020/10/27時点) webpack v5 のリリースは行われたが、まだバグが多くあり、webpack で使用する loader や plugin は対応が追いついていません。 パッとwebpack 5 関連の Issueを眺めるだけでも、まだ多くの問題があることがわかります。 なので、webpack v5 を使用するのは安全にいきたければ 1,2 ヶ月ほど待ってもよいと思います。 いまはこのバグ対応によりすでに webpack のバージョンは v5.3.0 になっています。 試して見たい方は v4 から v5 へのマイグレーションガイドを参考にするとよいです。 周辺ツールの現状 webpackを使用するにあたって特に重要な webpac
Webpack 5 release (2020-10-10) | webpack
Webpack 4 was released in February 2018. Since then we shipped a lot of features without breaking changes. We know that people dislike major changes with breaking changes. Especially with webpack, which people usually only touch twice a year, and the remaining time it "just works". But shipping features without breaking changes also has a cost: We can't do major API or architectural improvements.
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で入る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
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info テーマ textlint Privacy Firstな校正ツールを作る サーバにデータを送らずに、ローカルで文章のチェックをする textlintとは? textlint textlintJavaScriptで書かれた文章のLintツール ESLintの文章版 Markdown、Re:View、HTMLなど文章構造をパースしてからチェックする 一般的なスペルチェッカーは構造を見ないので誤検知する 200弱ぐらいのルールがある Collection of textlint rule · textlint/textlint Wiki 日本語、英語、言語に依存しな
俺の webpack.config.js-20200503 - mizchi's blog
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
JavaScript環境構築の設定をひとつずつ丁寧に -そのプラグインってどうして必要なの！？-：パイン缶
この本はWebフロントエンド開発の環境構築を1つ1つ丁寧にみていく本です。 特に設定が足りない状態で動かすとどうなるのか、なぜその設定が必要なのかについて踏み込んでいきます。 環境構築の難しさは設定をどれか1つでも間違えると動かないことにあります。 そのため環境構築をする上では、自分がした1つ1つの設定が何をしているのかを正確に把握しなければいけません。 そこでこの本では暗黙的に「そういうものだから」と思われがちな設定に注目し、解説します。 どの設定を足さなければ動かないのかをなるべくサンプルコードを示しながら解説します。 例えば、次のような例を扱います。 * babel-cli を使わずにトランスパイル * @babel/preset-env を使わずにトランスパイル * ESLintのpluginとextendsの役割の違い、またはその例外について * eslint-config-pr
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴 複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The State of JavaScript 上位5つに人気が集中し、なかでもWebpackのシェアは実に約60%に達しています。 今回ご紹介する「esbuild」は、Go言語で書かれた高速なバンドラーで、これらメジャーなツールとの性能比較（ベンチマークテスト）をやってみました。 公式のベンチマーク結果 計測方法は、three.jsライブラリを10回複製し、キャッシュなしで単一のバンドルをゼロから構築しています。なんと、Webpackに比べて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Speed Hackathon Online 出題のねらいと解説
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した
GitHub - merkle-open/webpack-config-plugins: Provide best practices for webpack 4 loader configurations
