モチベーション

デフォルト設定のまま nuxt.js を使っていると以下のようにCSSが大量にHTMLページ内に書き込まれてしまう。
これからCSSの埋め込みを削除し、別のファイルやCDNから読み込むようにしたい。

理由はAWSとかを使っていると通信量で課金されるので、HTMLファイルのロードの度にかかるコストを抑えたいため。
検証バージョンは nuxt.js の 2.12.2。

bootstrap-vueを選択した場合のindex.htmlから抜粋

<!doctype html>
<html data-n-head-ssr>
  <head >
    <meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content=""><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/runtime.js" as="script"><link rel="preload" href="/_nuxt/commons.app.js" as="script"><link rel="preload" href="/_nuxt/vendors.app.js" as="script"><link rel="preload" href="/_nuxt/app.js" as="script"><style data-vue-ssr-id="71f83a6d:0">/*!
 * Bootstrap v4.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
（攻略。 以下、BootstrapのCSSが埋め込まれている)

解決策

nuxt.config.js 内の build:extractCSS を true にする。

https://ja.nuxtjs.org/api/configuration-build/#extractcss

nuxt.config.js

  build: {
    extractCSS: true,
  }

感想

nuxt.js 1日目。どうにもこの辺りのことを整理しないと前に進めない性分なので、飲み込みが遅い…
やりたいことは明確で、extractCSSだと分かれば一発で分かったが、どのように検索していいかわからなかったのでものすごい時間がかかった。
- 失敗例: app.html の変数 HEAD がここで定義されているのを見てここの style を空にしようと試みたり……

以下に同じような出来事にあった人向けに検索用ワードを貼っておきます。

nuxt.js CSS 埋め込み短い短くする切り出す外部ファイル extract 書き出さないページサイズ大きすぎる小さくする小さい

nuxt.js の header に出てくるCSSを削除してページのサイズを小さくする

モチベーション

解決策

感想