Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

6,774 views

Published on

Gotanda.js #4

Published in: Engineering
  • Dating direct: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

大規模プロダクト 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. ありがとうございました

×