18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

optimize-js を使って JavaScript コードを最適化してみる

Last updated at Posted at 2016-10-01

追記

コメント欄に有用な情報をいただきました.どうやら構文的にパースのコストが増えるわけではないようです.また,optimize-js を使わなくても eslint の --fix で同様のことができるようです.

optimize-js

GitHub のトレンドリポジトリで JavaScript のコードを最適化するというやつが話題になっていたので試しに使ってみ(ようとし)ました.

$ npm install -g optimize-js

とすると,JavaScript のファイルを入力して最適化された JavaScript のコードを吐ける optimize-js というコマンドがインストールされます.

なんかすごそうなコマンドですが,実装を見てみた感じ,これは実際何をやっているかというと,

!function(){...}()

というコードを

!(function(){...})()

に置き換えているだけです.

多分 !function(){}() というコードは後ろの } まで到達しないと関数定義式かどうかが分からないため,関数のボディがデカくなるとトラックバックしてしまってパースに時間がかかるとかなんだろうなと思います.(ひどい話ですね…)どうやら関数をその場で呼び出すイディオム として(function(){})()!function(){}() がメジャーであり,後者がやばいということらしいです.

リポジトリ author の主張によるとベンチマークで Chrome ではなんと 52% も高速化しているとのこと.

手元のリポジトリ内の node_modules ディレクトリに grep をかけてみると !function(){}() というイディオムはそこそこ多用されていたので,試しに optimize-js を使ってみることにしました.

browserify で1つのファイルに bundle しているので話は簡単で

$ optimize-js build/bundle.js > build/bundle_optimized.js

とかすれば良いはず,なんですがエラーで動かず.どうやら ES2015 のコードでは動かないらしいです.

TypeScript を target ES2015 でコンパイルしてから browserify で結合していたのでまさしくこれでした.仕方ないので babel を使ってトランスパイルします.

$ npm install babel-preset-es2015 babel-cli
$ ./node_modules/.bin/babel --presets es2015 build/bundle.js > build/bundle_es5.js
$ optimize-js build/bundle_es5.js > build/bundle_optimized.js

が,やはりエラーが出る…ということで諦め.誰かエラー出ない人に試してほしい…

TypeError: undefined is not a function
    at walk (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/walk.js:17:16)
    at Object.skip (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/types.js:293:3)
    at walk (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/walk.js:17:16)
    at Object.exports.ReturnStatement (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/types.js:92:5)
    at walk (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/walk.js:17:16)
    at Object.skip (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/types.js:293:3)
    at walk (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/walk.js:17:16)
    at Object.exports.Program.exports.BlockStatement (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/types.js:25:5)
    at walk (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/walk.js:17:16)
    at Object.skip (/usr/local/lib/node_modules/optimize-js/node_modules/walk-ast/lib/types.js:293:3)
18
16
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?