Webpackでjsファイル、cssファイル、画像ファイルをインラインにする方法

なぜjsファイル、cssファイル、画像ファイルをインラインにするのですか？

なぜ画像ファイルをインラインに？

画像ファイルをインラインにすれば、HTMLの描写と一緒に表示させることができるのです。

なぜjsファイル、cssファイル、画像ファイルをインラインに？

Google DevelpersのPageSpeed Insightsをしてみると

ぺージの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。

が監査に入りますよね。

Webpaackはデフォルトだと、scriptタグでurlを読み込むようになってしまいます。より早く画面を描写するには、JSファイル、CSSファイルはインラインで読み込みたいですよね。

webpackのデフォルト

<script src="/bundle.js"></script>

⬇️

JSをインラインに

<script type="text/javascript">...</script>

jsファイル、cssファイル、画像ファイルをインラインにしたWebアプリのたぐまるでは、
モバイルのスコア、93、PCのスコア、100です！

jsファイル、cssファイルをインラインにする

HtmlWebpackInlineSourcePluginを使いましょう

HtmlWebpackInlineSourcePluginを導入

インストール

yarn add -D html-webpack-inline-source-plugin

HtmlWebpackInlineSourcePluginの使い方

webpack.config.jsで

webpack.config.js

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

そして

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$' // embed all javascript and css inline
    }),
  new HtmlWebpackInlineSourcePlugin()
]  

inlineSourceで、.(js|css)$とすれば、
cssとjsがインラインになります！！

画像ファイルをインラインにする

画像ファイルをインラインにすると、画面が描写されても、画像が表示されなくて、遅れて表示されますよね。
トップページの画像など遅延させたくない画像があるなら、インラインにしてみましょう。

url-loaderを使いましょう

https://github.com/webpack-contrib/url-loader
base64 URIに変換して、imgタグに展開してくれます。

url-loaderを導入

インストール

yarn add -D url-loader

url-loaderの使い方　

<img src="data:image/png;base64,xxxxx..."></img>

webpack.config.jsで

webpack.config.js

  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: 'url-loader',
      },
    ],
  }

これでインラインになります！
url-loaderと他の画像のloaderを併用することもできます！

まとめ

jsファイル、cssファイル、画像ファイルをインラインにするのはお手軽、簡単なのでやってみてください。