webpack
Lighthouse の Performance スコアを52から94に上げた。 Before。 After。 施策として具体的に何を行ったのか、書いていく。 経緯 以前、Shape Painter という SPA を作った。 構成はシンプルで、エントリポイントはひとつだけ。そしてそこで、ライブラリの…
JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、…
npm パッケージは、Node.js アプリによって使用されるだけでなく、モジュールバンドラがバンドルを行う際に使用されたり、CDN 経由でブラウザから使用されたりする。 この記事ではそれぞれのケースにおいて、npm パッケージとして配布されるファイルのうち、…
Redux では原則として、ひとつのアプリに対してひとつのstoreを作成する。 アプリ内に複数のstoreを共存させることも可能ではあるが、基本的には単一のstoreを利用するべきであり、公式ドキュメントでもそのように説明している。 Store Setup | Redux Style …
最小構成のサンプルから始めて、React のビルドや Babel プラグインの利用も出来るようにしていく。 当初はts-loaderとbabel-loaderを組み合わせてビルドする予定だったのだが、Babel プラグインが動かなかったので断念した。この資料の内容に沿って設定して…
Vueのコンポーネントをwebpackでビルドする際のパフォーマンスの話。 他のライブラリでは分からない。 詳しい人にとっては常識かもしれないし、大した話ではないのだが、ここまでパフォーマンスに違いが出るのは知らなかったので、記録しておく。 webpackと…
この記事では、Webpackerを使っている Rails アプリからWebpackerを剥がし、webpackを使うようにするための手順を書いていく。 Webpackerを止めたい理由は様々だが、主な理由は以下のような感じだろうか。 現時点ではWebpackerが使用しているwebpackのバージ…
ここでいうリビジョン管理とは、JavaScriptファイルやスタイルシートのファイル名に、ハッシュ値などのユニークな値（リビジョン）を付与すること。 そうすることで、ブラウザが古いファイルのキャッシュを利用してしまい変更が反映されない、という事態を回…
この記事を読んでいて知ったのだが、CSSを抽出する目的でextract-text-webpack-pluginを使うのは非推奨になったらしい。 qiita.com github.com webpack@4では mini-css-extract-plugin というプラグインを使うことが推奨されている。 というわけで、その使い…
この記事では、webpackのv4で追加されたsplitChunksを使って、v4で削除されたCommonsChunkPluginから移行する方法を書いていく。 使っているパッケージのバージョンは以下の通り。 webpack@4.1.0 webpack-cli@2.0.10 CommonsChunkPlugin とは CommonsChunkPl…
webpackではv4から、modeというオプションが追加された。 それに伴いminimize（コードの圧縮）の設定の仕組みも変わったので、それについても書いていく。 以下のライブラリのバージョンで動作確認している。 webpack@4.1.0 webpack-cli@2.0.10 uglifyjs-web…
webpackでは、JSファイルだけでなくCSSやSASSもバンドルの対象にできる。 このエントリではその方法を書いていく。 webpackのバージョンは以下。 webpack@4.0.1 webpack-cli@2.0.9 下準備 webpackをインストール。 $ npm i -D webpack webpack-cli npm scrip…
JavaScriptは動的型付け言語なので、型のチェックは行われない。 だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。 JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow。 同じく型システムを実現するものとしてTy…
webpackでは、開発用サーバを簡単に立てることが出来る。 前回の記事でwebpack2の導入に成功したので、今度はそこにwebpack-dev-serverを導入してみる。 前回の記事の最後で、Reactをビルドできる状態になった。 その時はhtmlファイルを直接開いていたが、ロ…
今まで、複数のファイルのバンドルにはbrowserifyを使っていた。 特に不満はなかったのだが、webpackに乗り換えていくことにした。 ネット上の記事を見てもwebpackを使っているケースは多いし、webpack-dev-serverという開発用サーバーも簡単に立てられるら…
