カテゴリー: 未分類

react.js + browserifyを使っていて一つのjsファイルが巨大化したので小さくするため
ライブラリ郡を外に出してみました

package.jsonを見ると

{
  "devDependencies": {
    "jquery": "^2.1.4",
    "react": "^0.13.3",
    "react-datepicker": "^0.12.0",
    "babelify": "^6.3.0",
    "browserify": "^11.1.0",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

な感じのものをつかっていて gulpfile.js がこんな感じ

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

var option = { debug: false };
gulp.task('debug', function() {
  option = { debug: true };
});

gulp.task('watch', function() {
  gulp.watch('./*.jsx', ['debug', 'browserify'])
});

gulp.task('browserify', function() {
  browserify('./index.jsx', option)
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./'))
});

gulp.task('build', ['browserify']);
gulp.task('default', ['debug', 'browserify', 'watch']);

この gulp build で bundle.js が出力されますが、 1.6 MB で大きかったので
react.jsとjqueryを bundle.js にまとめず直リンクするようにしました

直リンクは

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

とかCDNから読み込むようにして
thlorenz/browserify-shim
を使って、動作するようにします

$ npm install -D browserify-shim

$ vim package.json

{
  "devDependencies": {
    "babelify": "^6.3.0",
    "browserify": "^11.1.0",
    "browserify-shim": "^3.8.10",
    "gulp": "^3.9.0",
    "jquery": "^2.1.4",
    "react": "^0.13.3",
    "react-datepicker": "^0.12.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "browserify-shim": {
    "react": "global:React",
    "jquery": "global:$"
  }
}

と記載してあげて

$ vim gulpfile

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

var option = { debug: false };
gulp.task('debug', function() {
  option = { debug: true };
});

gulp.task('watch', function() {
  gulp.watch('./*.jsx', ['debug', 'browserify'])
});

gulp.task('browserify', function() {
  browserify('./index.jsx', option)
    .transform(babelify)
    .transform('browserify-shim', { global: true })
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./'))
});

gulp.task('build', ['browserify']);
gulp.task('default', ['debug', 'browserify', 'watch']);

で transform(‘browserify-shim’, { global: true }) で、package.jsonで指定したライブラリを
bundle.jsでも使えるようになりました

これで

$ gulp build

で 1.6MB -> 0.38MB になりました

入門 React ―コンポーネントベースのWebフロントエンド開発

posted with ヨメレバ

Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen オライリージャパン 2015-04-03

Amazon

Kindle

楽天ブックス

7net