KDE BLOG

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

2019-02-01から1ヶ月間の記事一覧

【webpack速習】vol.9: Lazy Loading

下記ページをざっくりまとめます。 webpack.js.org Example Frameworks

【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速習】vol.6: Tree Shaking

下記ページの要点をまとめます。 webpack.js.org また一部を下記ページより引用、大いに参考にさせていただいています。 www.kabuku.co.jp tree shakingとは 実際に試してみる tree shaking を有効にする 関数をexport するファイルを作る 関数を import す…

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

webpack.js.org 上記ページの要点をまとめていきます 概要 HMRはどのように機能するか 1. アプリケーションにおいて 2. コンパイラにおいて 3. モジュール内において 4. ランタイム(実行)時において はじめかた HMRの使い方 HMRを有効にする webpack.confi…

【webpack速習】vol.4: Development

下記ページの要点になります。 webpack.js.org 開発時に役立つ機能のガイドページになります。 コードを自動的にコンパイルし、簡単な開発サーバを実行する内容です。 development mode source maps を使う 開発ツールの選択 watch モードを使う webpack-dev…

【webpack速習】vol.3: Output Management

下記ページの要点をまとめていきます。 webpack.js.org ざっくりいうと、出力されたバンドルファイルの読み込みを自動で行うようにするためにhtmlの生成を動的にするガイドです。 概要 準備 エントリーポイントとアウトプットの設定を修正 HtmlWebpackPlugin…

【webpack速習】vol.2: Asset Management

今回は下記ページの要点をまとめていきたいと思います。 webpack.js.org CSSを読み込む 補足 画像の読み込み フォントファイルを読み込む csvやxmlなどのデータファイルを読み込む グローバルなアセット

【webpack速習】vol.1: 概要 & Getting Started

個人ではなんとなくコピペで使っていたwebpack。 会社業務で使っている webpack のビルドを早くしたいのだけれど、ちゃんと webpack について理解しておらず設定ファイルをうまくいじれないのが悔しいので、ちゃんと1から学ぼうと思います。 volいくつまで続…

Redux-thunkを使ったReduxの非同期処理

前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケー…

React + Redux の基本的な使い方

久しぶりにReduxを使ったら使い方をすっかり忘れていました。 改めて勉強しなおしたのでメモしておきたいと思います。 Reduxとは Reduxのメリット 3つの原則 1. 真実の出所は1つ(Single source of truth) 2. stateは読み込み専用(State is read-only) 3.…