CompressionStream でブラウザで gzip 圧縮する

2024/09/03 14 users gzip pako Deflate Chrome JS実装

モダンなブラウザは JS API として gzip や deflate が使えます。 昔から Chrome に搭載してるのは知ってたんですが、今見たらだいたい搭載してました。 わかってる人向けに言うと、バンドルサイズ大きめの JS実装の pako や zlib.js が不要になって、ブラウザネイティブの(たぶんHTTP上のgzip展開と同等の)高速な実装が... 続きを読む

VanJS で素のDOM操作をリファクタしたら最高だった

2023/08/17 24 users gzip圧縮 トランスパイル UIフレームワーク DOM操作

VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にす... 続きを読む

Vue 3 で Options API を無効化するという選択肢

2022/12/23 9 users Options API 選択肢 Vue 3 バージョ gzip

概要 本記事は、Vue 3 で Options API を使用するためのフラグである __VUE_OPTIONS_API__ を無効化した場合の挙動やバンドルサイズの違いについてまとめになります。 TL;DR Options API を一切使わないプロジェクトなら、Vue アプリケーションの バンドルサイズを 5.49kB 削減 できました (gzip なら 2.14 kB) バージョ... 続きを読む

会計PlusのWebフロントエンドパフォーマンス改善 | Money Forward Engineers' Blog

2022/10/19 14 users Money Forward Engineers Blog

大阪開発拠点でマネーフォワード会計Plus（以下、会計Plus）プロダクトのフロントエンドエンジニアをやってます、しばもとです。好きな食べ物は、ポンデリングです。 私が所属する会計PlusのWebフロントエンドで改善活動を行いました。その改善活動としてビルド時間の短縮、バンドルサイズの削減、Jestの実行時間短縮な... 続きを読む

React Server Componentsの仕組み：詳細ガイド | POSTD

2022/07/27 99 users POSTD RSC React ビルダー 関心

React Server Components（RSC）は、ページの読み込みパフォーマンスやバンドルサイズのほか、Reactアプリケーションの書き方に近い将来大きな影響を与えることになる、素晴らしい新機能です。 Plasmicでは、Reactのビジュアルビルダーを開発しており、Reactのパフォーマンスには大きな関心を持もっています。 当社のク... 続きを読む

ESM treeshake に対応したバンドルサイズを計算してくれる Shakerphobia を作った

2022/03/24 8 users package.json dist npm import バン

bundlephobia.com というサイトがあります。これは npm のモジュールを参照した際のバンドルサイズを算出してくれるサービスです。 便利なんですが、基本的に dist/.. 等の package.json の main で配られるものだけをターゲットにしているので、 ESM Treeshake で一部のモジュールだけ import {} from ... した際のバン... 続きを読む

Prettier のサイズを減らすテクニック

2022/03/19 28 users Prettier rollup モジュールバンドラー サイズ

実は先日リリースした Prettier 2.6 では前のバージョンである 2.5.1 と比べてバンドルサイズが 3MB ほど減っています。 Prettier 2.5.1 のサイズ(20.0MB) Prettier 2.6.0 のサイズ(16.9MB) リリースブログで言及したとおり Prettier 2.6 ではモジュールバンドラーを Rollup から esbuild に移行したので、その影響かと... 続きを読む

Svelteとは | Zenn

2020/09/22 13 users React Svelte Zenn ライブラリ コミュ

はじめに 最近、フロントエンドでたまに聞く、Svelteというライブラリについての紹介記事です。 https://svelte.dev/ ReactやVue.jsのような宣言的にUIを記述できるので、簡単にWebアプリケーションやUIを作れる。かつ、バンドルサイズやランタイムが小さく、高いパフォーマンスが期待できるライブラリです。 まだコミュ... 続きを読む

Angular v8がリリースされました！バンドルサイズ削減され、新レンダリングエンジンIvyのプレビュー版が利用可能に！ ｜ DevelopersIO

2019/06/04 12 users 西村祐二 DevelopersIO 大阪オフィス もと 下記

どうも！大阪オフィスの西村祐二です。 ちょっと日にちが過ぎましたが、5/29にAngular v8がリリースされました！ 今回はそのアップデート内容をまとめてみます。 主に下記のサイトをもとにまとめていますので、詳細がき […] 続きを読む