KDE BLOG

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

【webpack速習】vol.13: Build Performance

下記ページのざっくりとした翻訳。

webpack.js.org

  • General
    • Stay Up to Date(最新に保つ)
    • Loaders
    • Bootstrap
    • Resolving
    • Dlls
    • Smaller = Faster
    • Worker Pool
    • Persistent cache(永続キャッシュ)
  • Development
    • Incremental Builds
    • Compile in Memory
    • stats.toJson speed
    • Devtool
    • Avoid Production Specific Tooling(production 固有のツールを避ける)
    • Minimal Entry Chunk
    • Avoid Extra Optimization Steps(余分な最適化手順を避ける)
    • Output Without Path Info
    • Node.js Version
    • TypeScript Loader
  • Production
    • Multiple Compilations
    • Source Maps
  • Specific Tooling Issues(特定のツールのイシュー)
    • Babel
    • TypeScript
    • Sass
続きを読む

【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の選択肢)
続きを読む