モチベーション
デフォルト設定のまま 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 にする。
nuxt.config.js
build: {
extractCSS: true,
}
感想
- nuxt.js 1日目。 どうにもこの辺りのことを整理しないと前に進めない性分なので、飲み込みが遅い…
- やりたいことは明確で、extractCSSだと分かれば一発で分かったが、どのように検索していいかわからなかったのでものすごい時間がかかった。
- 失敗例:
app.htmlの変数HEADが ここで定義されているのを見てここの style を空にしようと試みたり……
- 失敗例:
以下に同じような出来事にあった人向けに検索用ワードを貼っておきます。
- nuxt.js CSS 埋め込み 短い 短くする 切り出す 外部ファイル extract 書き出さない ページサイズ 大きすぎる 小さくする 小さい