ディレクトリ名にチルダ(~) が使えないサーバーで Partytown を使う
Partytown とは
外部ツールの埋め込み用スクリプトなどの読み込みを メインスレッド から ウェブワーカー に移動させることで、メインスレッドの負荷を軽減することができるライブラリです。
導入することで、パフォーマンスの向上が期待できます。
事象
Partytown を使う場合、ビルド時に ~partytown というディレクトリ名称で関連スクリプトが書き出しされる。
ただ、サーバーの仕様・設定によっては名称にチルダを含めることができないため、エラーが発生する。
対策
私の場合、下記で対策しました。
①ビルド後に生成された ~partytown ディレクトリのチルダを削除する
②partytown ディレクトリを参照するよう設定を変更する
以下リポジトリでは実際にこの対策を行っています。
ビルド後に生成された ~partytown ディレクトリのチルダを削除する
ディレクトリ名からチルダを削除するシェルスクリプト scripts/rename-dist-dirs.sh を作成します。
#!/bin/bash
DIST_DIR="./dist"
# Check if dist directory existsif [ -d "$DIST_DIR" ]; then # Iterate over directories in dist for dir in "$DIST_DIR"/~*; do if [ -d "$dir" ]; then # Remove the tilde from the directory name new_dir=$(echo "$dir" | sed 's/~//') mv "$dir" "$new_dir" echo "Renamed $dir to $new_dir" fi doneelse echo "Dist directory does not exist."fiそして、ビルド後にこのシェルスクリプトを実行するように、package.json の scripts に追加します。
(下記は Astro の場合の例。 && sh scripts/rename-dist-dirs.sh を追加します。)
{ "scripts": { "build": "astro check && astro build", "build": "astro check && astro build && sh scripts/rename-dist-dirs.sh", }}partytown ディレクトリを参照するよう設定を変更する
lib プロパティに参照パスを明記します。
チルダを削除したディレクトリ名を指定します。
(下記は Astro の場合の例。)
export default defineConfig({ site: site, base: base, prefetch: { prefetchAll: true, }, integrations: [ tailwind(), sitemap(), react(), partytown({ config: { forward: ['dataLayer.push'], lib: '/partytown/', }, }), ], vite: { optimizeDeps: { exclude: ['fsevents'], }, },});