大規模プロダクト Webpack やっていく気持ち

240 views
199 views

Published on

Gotanda.js #4

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
240
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

大規模プロダクト Webpack やっていく気持ち

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

×