javascript:ide

IDE Labo

TODO: 以下の内容のうち DokuWiki に関する内容は整理して DokuWiki に移動して、Apache に関する内容は整理して Apache HTTP Server に移動しよう。

ネイティブ シンタックスについては、Chrome V8 ネイティブ シンタックスを有効化する方法 を参照のこと。
Linux

$ /opt/google/chrome/chrome --js-flags="--allow-natives-syntax" &

chrome-beta の場合

$ /opt/google/chrome-beta/chrome --js-flags="--allow-natives-syntax" &

IDE のソースコードの大半は DokuWiki の Media によって配信されるため、<script>src URL?cache=recacheを付加するように変更した。

ide.html
  <script src="/_media/javascript/requirejs/require-2.3.6.min.js?cache=recache"></script>
  <script src="/_media/javascript/requirejs/settings.js?cache=nocache"></script>

settings.js だけは即反映して欲しいので nocache とした。

requirejs/settings.js
require.config({
  // DokuWiki media cache setting (cache=recache = cachetime setting value)
  urlArgs:                  'cache=recache',

これにより、クライアントサイドでは、DokuWiki の [管理] - [サイト設定] の cachetime の時間までキャッシュされるようになる。しかし、php.ini のデフォルト設定で Pragma: no-cache が付加されるため、更に以下のような工夫が必要である。

Fedora による LAMP(Apache, MySQL, PHP) 環境構築

session.cache_limiterpublic に設定することでも、Pragma: no-cache を吐かなくなるが、DokuWiki の ?do=edit (編集ページ) までキャッシュされて動作不良を起こす。(この方法は上手く行かない)

/etc/php.ini
;session.cache_limiter = nocache
session.cache_limiter = public

以下のように .htaccess を編集して、メディア配信要求に限定して Pragma: cacheset する。

dokuwiki/.htaccess
...
RewriteRule lib/exe/fetch\.php - [E=X_CACHE_HEADER]
RewriteRule ^_media/(.*)              lib/exe/fetch.php?media=$1  [QSA,L]
RewriteRule ^_detail/(.*)             lib/exe/detail.php?media=$1  [QSA,L]
RewriteRule ^_export/([^/]+)/(.*)     doku.php?do=export_$1&id=$2  [QSA,L]
RewriteRule ^$                        doku.php  [L]
RewriteCond %{REQUEST_FILENAME}       !-f
RewriteCond %{REQUEST_FILENAME}       !-d
RewriteRule (.*)                      doku.php?id=$1  [QSA,L]
RewriteRule ^index.php$               doku.php
 
Header always set Pragma cache env=X_CACHE_HEADER
...

lib/exe/fetch.php への要求に対して環境変数 X_CACHE_HEADER をセットして、メディア配信要求に限定して Pragma ヘッダの cacheset する。

FireFox だけ上記の設定を行っても、ファイルによってはキャッシュを利用しない事がある。
いろいろ試した結果、ETag を除去するとキャッシュの利用割合が増加するようだ。

dokuwiki/.htaccess
Header unset ETag
FileETag None
...

ETag があると FireFox は余計なキャッシュ確認を行う??
HTTP キャッシュ - HTTP | MDN

キャッシュを無効化した際の転送量は 4.48MB であるが、ETag を除去してキャッシュを有効化すると転送量は 1.88MB まで削減できた。

Apache の HTTP 圧縮を有効化して html, txt, csv, css, js, json, py, wasm, data, svg などのファイルを Brotli で圧縮して配信時間を短縮している。

/etc/httpd/conf/httpd.conf
# Compress Filter Settings
#
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/csv text/css application/javascript application/json application/x-python application/wasm application/octet-stream image/svg+xml

少ないセッションで大量ファイルを転送するために、Web サーバーのプロトコルを HTTP/2.0 に設定する。

/etc/httpd/conf.d/domain-name.conf
Protocols h2 h2c http/1.1

以上のチューニングにより IDE のロード時間はモバイル回線で以下のようになる。(DEBUG: false - js/css Minify)

  • Chrome で最速 161(cache on)~1500(cache off)ms である。
  • FireFox で最速 213(cache on)~1349(cache off)ms である。

Don't edit!!

12ebdfd80

  • javascript/ide.txt
  • 最終更新: 2024/02/04 14:26
  • by 非ログインユーザー