KDE BLOG

バイブス

【webpack速習】vol.8: Code Splitting

下記ページの要点をまとめていきます。

webpack.js.org

  • Entry Points
  • Prevent Duplication(重複を防ぐ)
  • Dynamic Imports(動的インポート)
    • async function を使う
  • Prefetching/Preloading modules
  • Bundle Analysis(バンドル分析)
続きを読む

【webpack速習】vol.7: Production

下記ページの要点をまとめていきます。

webpack.js.org

本番サイトまたはアプリケーションを構築するためのベストプラクティスとユーティリティについて説明。

  • セットアップ
    • npm scripts
    • webpack.common.js で設定済みのプロパティに、webpack.prod.js あるいは webpack.dev.js で追加するには
  • Specify the Mode(モード指定)
  • Minification(圧縮)
  • Source Mapping(ソースマッピング
  • Minimize CSSCSSの圧縮)
  • CLI Alternatives(CLIの選択肢)
続きを読む

【webpack速習】vol.6: Tree Shaking

下記ページの要点をまとめます。 webpack.js.org

また一部を下記ページより引用、大いに参考にさせていただいています。 www.kabuku.co.jp

  • tree shakingとは
  • 実際に試してみる
    • tree shaking を有効にする
    • 関数をexport するファイルを作る
    • 関数を import するファイルを作る
    • tree shaking 無効にしてビルドした場合
    • tree shaking 有効にしてビルドした場合
  • ここまでのまとめ
  • Production モードでも不要なコードが含まれてしまう
    • 副作用(side effect)とは
    • 副作用がないことをwebpackに伝える
  • package.json に sideEffects プロパティを指定
    • 検証
  • まとめ
  • 参考
続きを読む

【webpack速習】vol.5: Hot Module Replacement

webpack.js.org

上記ページの要点をまとめていきます

  • 概要
  • HMRはどのように機能するか
    • 1. アプリケーションにおいて
    • 2. コンパイラにおいて
    • 3. モジュール内において
    • 4. ランタイム(実行)時において
    • はじめかた
  • HMRの使い方
    • HMRを有効にする
    • webpack.config.js で設定しない場合
    • HMRが難しい場合がある
  • CSSのHMR
  • まとめ
続きを読む