TypeScript 本体のコードを読んでみよう
みんなお世話になっている TypeScript のコードを読みたいと思ったことはないだろうか。読んだ。 一週間ぐらいかかった。完全に読み切ったとは言えないが、概要は掴んだ。 なかなかに複雑でドメイン知識を得るのが難しかったので、これから読む人向けに、登場人物や概念を整理して紹介したい。 読んだのは 2023/6/8 時点で git clone したコード。 最初に: 自分のゴール設定 複数ファイルにまたがった参照を、 TypeScript の Language Service が提供する findReferences() や findRenameLocations(), goToDefinitions() を使って、インクリメンタルに書き換えたかった。 Terser を使うと、今触ってるオブジェクトが何で、何のメンバを書き換えたかの情報が残らない。これを TypeScript のレイヤーで
cloudflare の better micro frontend を読む
これはなにか cloudflare スタックを使ったマイクロフロントエンドの提案。 特に service-binding を活用することで異なるサービス(ここでは cloudflare worker)から配信されるフロントエンドを統一的にSSRしつつ、開発単位を分離している。 RTT最適化のために qwik で書かれているが、SSR を意識しなければ他のライブラリを採用しても良い。 $ tree . -I node_modules . ├── README.md ├── body │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── Body.css │ │ ├── entry.ssr.tsx │ │ └── root.tsx │ ├── tsconfig.json │ ├── vite.config.t
packelyze - お前の TypeScript はもっと小さくなる
TypeScriptの型定義ファイルから積極的な圧縮を行うための @mizchi/optools をリリースした。まだ実験中だが、結構動くはず。使う場合は自己責任で。 追記: optools を packelyze に rename した。これは optools という CLI 名が ImageMagick の提供するコマンドとぶつかったため。 試行錯誤の過程は https://zenn.dev/mizchi/scraps/1bdf01f5efb147 にある。 このライブラリは、自分の所属する Plaid の業務時間中に作成した。 想定ユーザー ライブラリ作者 ビルドサイズ厳しいフロントエンド開発者(サードパーティスクリプト等。自分が業務で作った理由がここ) リスクとってでもビルドサイズを縮めたいフロントエンド作者 動機 世の中な TypeScript で書かれたコードは、その型情報を使
corepack でモジュールごとに npm クライアントを指定する
tl;dr node 14.19.0 で npm のバージョンを明示的に切り替える corepack が入った package.json の packageManager フィールドで npm 自体のバージョンや yarn の使用するバージョンを指定できる 詳しくは https://zenn.dev/teppeis/articles/2021-05-corepack 現状の npm-cli 自体が corepack に対応してないので、有効にしたければ npm コマンド自体を corepack に移す必要がある 現時点で packageManager を指定するだけだとまだ他の環境で有効にならないが、将来的に npm と node の corepack 対応が行き渡った時点で段階的に有効になる。 もっと詳しく # 手元の node を v14.19.0 以上に更新する # 自分は nvm
JS のビルドサイズを極限まで絞るための TIPS 集
ビルドサイズ限界まで絞りたい人向け。 あらゆる環境で実践するものではないが、知ってたら簡単に避けることができるのもあるので知っておくと便利なTIPS書いていく。 基本ポリシー 未使用コードはビルド時に全部落とす。 何が未使用コードで、何が定数かわかるようなインターフェースを人間が心がける。 用語 Dead Code Ellimination(DCE) Rollup や Terser で、未使用コードを削除すること
webpack / vite で public path の設定はもういらなくなっていた
※ただし IE は除く 問題 今までのフロントエンドの悩みの一つに、 publicPath の設定がありました。これはchunkを含むビルドした際に、chunk を解決するホストを明示的に指定する必要がある、というものです。 例えば、 https://cdn.example.test/assets/module.js に静的ファイルを配置する際、 publicPath として https://cdn.example.test/assets/ を指定する、という必要がありました。これはレガシーブラウザ環境だと module.js が自分自身がどのようなパスとして実行されているからわからず、相対パスのファイルのパスを知る方法がなかったのでビルド時に指定する必要があったわけです。 解決方法 現在、ESM なら import.meta.url、 <script src="..."></script
rollup / vite で prebuild 済みのファイルをパースせずに読み込む
ビルド済みの依存がない 巨大な js を import するとき、バンドラーによる解析フェーズを飛ばしたいことがあります。巨大なファイルを別にビルドして、アプリケーションとしてその利用者になるときなどですね。単体で動く巨大なモジュールとして、 typescript や prettier が挙げられます。 というわけで、 webpack だと noparse オプションで解析をスキップできるのですが、 vite / rollup だとそれがないので無理やり実現するプラグインを作りました。 気が向いたら npm に投げますが、別に設定ファイルに直接書いてもいいぐらいの分量なので, vite.config.ts を置いときます。(vite に設定ファイルの ts 対応が入ってます) // vite.config.ts import type { Plugin } from "rollup"; i
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
