-
Be the first to like this
Upcoming SlideShare
大規模プロダクト Webpack やっていく気持ち
- 1. 大規模プロダクト Webpack やっていく気持ち @_tohashi
- 2. about me • Takumi Ohashi • twitter: @_tohashi • GitHub: @tohashi • freeeという会社でエンジニア
- 3. 会計freee • クラウド会計ソフト • 2013/03/19 リリース • 日々機能追加や改善を続けています
- 4. 昨年中頃まで コーヒーバック ボーンスプロケ ッツ
- 5. 最近 バベルリアクト ガルプウェブパ ック
- 6. フロントのモダン化進行中 • CoffeeScript, Backbone.js, Sprockets -> Babel(ES2015), React.js, gulp.js, Webpack • 新規開発やリファクタ部分をメインに段階的 に移行中 • 似たような話は最近ちらほら
- 7. ビルドはgulp.js & Webpackで • scss, images, template -> gulp.js で build & watch • JavaScript(ES2015), CoffeeScript -> Webpack でbuild & watch • npm scriptでまとめて実行
- 8. ある日の開発風景
- 9. 今日もjs書くぞ〜〜〜
- 10. …
- 11. 暇になって遊び始める
- 12. コミットして一旦ブランチ変え るぞ〜〜〜
- 13. 突然の死
- 14. 最初に戻る
- 15. 監視対象が多い • JavaScript: 800 • CoffeeScript: 600 • Sass: 200 • gulp.js のperformance issueはv4で解決すると いう話もあるが…
- 16. jsのエントリーポイントが多い • SPAではない • 元々application.js一つだけだったのをルーテ ィングごとに依存解決して分割していった • 結果、現在のjsエントリーポイント数: 80
- 17. Webpackのモジュール解決 • 最初に依存関係にあるモジュールを全部ビル ドしてキャッシュ • 以降、変更のあったモジュールのみビルドし 直す（インクリメンタルビルド） • 当然ファイル数に応じて時間がかかる
- 18. ファイル変更検知と 最初に全モジュールの ビルドをやめる
- 19. webpack-dev-server • Webpackの成果物配信用のローカルサーバー を起動（中身はexpress） • Hot Module Replacementでページをリロード せずに部分的に更新 • 最初に全部ビルドするのは変わらず
- 20. lazy mode • 変更を監視せずに、ローカルサーバーに対し てリクエストがあったタイミングでビルド • Hot Module Replacementとの併用はできない • assetsの参照先をlazy modeで起動した webpack-dev-serverに変更
- 21. DEMO
- 22. やや改善したが… • 立ち上がりの遅さ & メモリ使用量は改善 • 結局初回リクエスト時に各モジュールをビルドし 直すのはそれなりに時間がかかる • 前回起動時のキャッシュをimportして再利用でき れば早いのでは • プラグインないので作るよ！
- 23. DEMO 進捗ダメです
- 24. 展望 • キャッシュの件はうまくいったら公開します • gulp.jsとWebpackの併用は正直しんどい • CSSなどもWebpackに寄せていきたい • CSS in JSにするかはさておき…
- 25. フロントエンド環境 • 日々いろんな事例は聞くけど微妙にコンテキストやアー キテクチャが違う • Webサイト or Webアプリ, SPA or ページ遷移, サーバ ーサイドの環境、etc… • 確立されたものはないのでアプリやチームの変化に対応 していく必要がある • フロントエンド環境職人が求められる
- 26. やっていく気持ちをもって やっていきましょう
- 27. 求人情報 • gulpfileとかwebpack.config書くのが趣味の人 • 「ES6で書く」と聞くと「ES6なんて名前の言 語は存在しない（後略」と言わずにはいられ ない人 • jQueryUIに親を殺された人
- 28. ありがとうございました
Be the first to comment