JavaScriptでimportを使わず依存関係のある複数ファイルを動的ロードするで複数分割した依存関係のある JavaScript ファイルを依存順通りに読む関数を書きました。この記事でも自分で突っ込んでいるように、そもそも無理やりスクリプトをロードしようとしないで、オフラインで1ファイルに結合しておけよという話ではあるので、複数の .js を1ファイルにまとめたらどの程度処理速度が改善するのか確認してみました。
js ファイルの総行数は33071行、総サイズは1.26MB、元のファイルは16ファイルに分割されています。ローカルで30回程度ロード時間を計測して、おおよその処理時間を調べました。
| 元の状態(16ファイルに分割) | 270～330 ms 程度 |
| 1ファイルに結合 | 70～190 ms 程度(1.26 MB) |
| 1ファイルに結合後にjsminで圧縮 | 60～160 ms 程度(753 KB) |
1ファイルにまとめたことでスクリプトのロード時間もかなり改善することが確認できました。jsminで js ファイルを圧縮するとファイルサイズが60％くらいまで削減できましたが、ローカルでのスクリプトロード時間はそこまで変わりませんでした。実際にネットワーク上だとファイルのダウンロード時間の影響もあるので、環境によっては差が出てくるんじゃないかと思います。
一応検証に使った複数の .js を1ファイルに結合する bat ファイルの内容を貼っておきます。
@echo off
SetLocal EnableDelayedExpansion
set output_js=%~dp0combined.js
set filenames=GlobalDefinitions,Utilities,Skill,Tile,Map,Structures,Table,Unit,DamageCalculator,TurnSetting,AudioManager,AetherRaidDefensePresets,AppData,SettingManager,Main_ImageProcessing,Main
if exist %output_js% del %output_js%
break>%output_js%
for %%n in (%filenames%) do (
type %~dp0Sources\%%n.js>>%output_js%
)
