目次
IDE Labo
TODO: 以下の内容のうち DokuWiki に関する内容は整理して DokuWiki に移動して、Apache に関する内容は整理して Apache HTTP Server に移動しよう。
Chrome で V8 ネイティブ シンタックスを有効にする方法
ネイティブ シンタックスについては、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 ロード時間の短縮
クライアントサイドキャッシュの利用
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 が付加されるため、更に以下のような工夫が必要である。
PHP アプリが Pragma: no-cache を吐かないように設定
Fedora による LAMP(Apache, MySQL, PHP) 環境構築
session.cache_limiter を public に設定することでも、Pragma: no-cache を吐かなくなるが、DokuWiki の ?do=edit (編集ページ) までキャッシュされて動作不良を起こす。(この方法は上手く行かない)
- /etc/php.ini
;session.cache_limiter = nocache session.cache_limiter = public
以下のように .htaccess を編集して、メディア配信要求に限定して Pragma: cache を set する。
- 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 ヘッダの cache を set する。
FireFox が確実にキャッシュを使うようする
FireFox だけ上記の設定を行っても、ファイルによってはキャッシュを利用しない事がある。
いろいろ試した結果、ETag を除去するとキャッシュの利用割合が増加するようだ。
- dokuwiki/.htaccess
Header unset ETag FileETag None ...
ETag があると FireFox は余計なキャッシュ確認を行う??
HTTP キャッシュ - HTTP | MDN
キャッシュを無効化した際の転送量は 4.48MB であるが、ETag を除去してキャッシュを有効化すると転送量は 1.88MB まで削減できた。
Apache の HTTP 圧縮
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
HTTP プロトコルを HTTP/2.0 に設定
少ないセッションで大量ファイルを転送するために、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 である。
Wiki Hash
Don't edit!!
12ebdfd80