Help us understand the problem. What is going on with this article?

Prepackを試してみよう。

More than 3 years have passed since last update.

自己紹介

じゅんじゅんと言うニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪3回生です。(2017/06/02現在)

イベントや、勉強会に参加してるので是非お会いした際はお声掛けください!

Prepackとは

Prepackとは、facebookが作っているJavaScriptを高速化するツールです。

スクリーンショット 2017-06-02 11.54.28.png

公式サイト: Prepack

GitHub: facebook/prepack

少し前にPrepackが話題になりましたね...

どういうものなのかサクッと公式サイトのコードを真似て見たいと思います。

(function () {
  function hello() { return 'hello'; }
  function world() { return 'world'; }
  global.s = hello() + ' ' + world();
})();

例えばこういったコード。

prepackを通すと

(function () {
  s = "hello world";
})();

になるらしい...

これは、計算できる場所をコンパイル時にしてしまって高速化を図るツールであると...

使い方

使い方は、ブラウザで確認するかローカルにprepackをインストールして使うかです。

ブラウザで使う場合は、公式サイトからリンクがはっているTry It Outから実行できます。

ローカルにインストールする場合は

$ npm install prepack -g

prepackをnpmからグローバルインストールしてください。

すると、コマンドラインでprepackというのが使えるようになります。

prepackコマンドの使い方は、

$ prepack <file name>.js

とjsのファイルを指定するか

$ prepack <file name>.js --out <out file name>.js

として、結果を保存するファイルを指定することもできます。

--outを指定しない場合はコマンドラインに実行結果が出力されます。

一度簡単な例で試してみましょう。

test1.js
(function(){

  var hoge = "hoge"
  var huga = hoge

  global.huga = huga

})()

これをprepackに通すと

(function(){
  huga = "hoge"
})()

と短縮されます。

注意点として、prepackではコードを書く際に無名の即時関数で囲まないといけません。

var hoge = "hoge"
var huga = hoge
global.huga = huga

などのように書き始めてしまうと

huga = undefined;
hoge = undefined;
hoge = "hoge";
huga = "hoge";

のような結果になります。

最後にglobalにいれていますが例えば

(function(){
  var hoge = "hoge"
  var huga = hoge

  console.log(huga)

})()

としてみると

console.log("hoge")

と短縮されています。

ES2015のコードでかいて、webpackでトランスパイルしたやつをprepackする。
とかになると、プラグイン的なものをいれるようです。

JSの最適化ツール「Prepack」を使ってみる

あとがき

Prepackはまだまだ開発段階のものなので、プロダクトにすぐ導入できるかと言われるとそうでもないですが、長い目で見守っていきたいですね!

テスト的に書いているコードなどは全てGitHubにあるので参考までに。

GitHub konojunya/prepack

質問等はTwitterへなげてもらえるとありがたいです。

Twitter @konojunya

iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした