KDE BLOG

Webデザインやコーディングについて書いています

【webpack速習】vol.8: Code Splitting

webpack

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

webpack.js.org

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

【webpack速習】vol.7: Production

webpack

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

webpack.js.org

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

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

【webpack速習】vol.6: Tree Shaking

webpack

下記ページの要点をまとめます。 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

webpack.js.org

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

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