clientのコードが重くなってる

[shokai]

960kbあるのはおかしい

highlight.jsを入れた頃から急に増えてるような？ でもhighlight.jsにはdependenciesが無いし、サーバーサイドレンダリング #41 のあたりからかもしれない

[shokai]

$ browserify --extension=.jsx --extension=.es6 -t [ babelify ] --list src/client/index.es6 > list.txt
$ cat list.txt| xargs du -k | sort -n | grep highlight

リストを見ると、serverのコードが混じってるという事は無かった

このへんが重い

12      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/index.js
12      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/glsl.js
12      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/livecodeserver.js
12      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/stylus.js
12      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/vim.js
16      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/gauss.js
16      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/sql.js
20      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/mel.js
20      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/stata.js
24      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/highlight.js
24      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/x86asm.js
36      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/maxima.js
36      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/sqf.js
68      /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/mathematica.js
108     /Users/sho/src/nodejs/semirara/node_modules/highlight.js/lib/languages/autoit.js

autoitなんかuglifyしても88kbある

[shokai]

import文の書き方次第で減ったりするかも？特にReactのあたり

[shokai]

import直したけど変わらなかった

highlight.jsの不要なlanguageを削るか、CDNから読み込むかする https://cdnjs.com/libraries/highlight.js/

[shokai]

必要な言語だけビルドする

% node tools/build.js --target node javascript ruby
% ls src/languages | ruby -lane 'print $_.gsub(/\.js$/,"").gsub(/[\r\n]/,"") unless /^(autoit|mathematica|sqf|maxima|stata|mel|gauss|livecodeserver)\.js$/ =~ $_' | xargs -t node tools/build.js --target node

[shokai]

• ビルドした軽いhighlight.jsをこのリポジトリに追加する
• highlight.jsをnpmではなくgithubから取得し、最新版を毎回ビルドする
• 安定したバージョンをshokai/highlight.js#lightなどブランチを切っておいてそこから毎回ビルドする
• CDNからbrowserify-shimで読み込む。サーバーサイドはnpmから読み込む。

[shokai]

browserify-shimを使った

reactとreact-domをproduction時だけCDNJSから読み込むようにした

index.jsは744kbになった

[shokai]

CDNにあるhighlight.jsはhighlightメソッドを使ってstringをハイライトすることはできず、preタグへの装飾しかできない

[shokai]

いっそ文字列をhighlightして返す機能をサーバーで提供するか

[shokai]

軽いhighlight.jsを自作したほうがいいかも

[shokai]

   "browserify-shim": {
     "react": "global:React",
    "react-dom": "global:ReactDOM",
    "highlight.js": "global:hljs"
   },

これでよかった