[Nuxt.js] いらない機能をばっさりカット "SUPER slim builds" を試してみる [軽量化]

※2019/10/29現在、実験的な機能です

SUPER slim builds?

Release v2.10.0 · nuxt/nuxt.js

Nuxt.js の v2.10.0 リリースノートに 🌟Highlights としてアナウンスされているものの、実験的機能ということもあってか、公式 Doc にも全然情報がないので SUPER 気になって調べてみた。

要約

The Nuxt Vue-app has quite a bit of features which until this PR were always included, whether you used them or not. This PR defines a list of features which are used to either include or omit the corresponding code in the Vue-app templates. This makes it possible for a user to further optimize their bundle sizes.

feat(vue-app): support configurable features by pimlie · Pull Request #6287 · nuxt/nuxt.js

「Nuxt で作られたアプリは機能てんこ盛りすぎるので、必要な機能だけ選んでバンドルサイズを減らせるようにします。」

というもの。
ちなみに機能の正式な呼称としては configurable features になる模様。

使い方

要：Nuxt.js v2.10.0 以上

nuxt.config.js に features list を追加。

nuxt.config.js

export default {

  features: {
    store: true,
    layouts: true,
    meta: true,
    middleware: true,
    transitions: true,
    deprecations: true,
    validate: true,
    asyncData: true,
    fetch: true,
    clientOnline: true,
    clientPrefetch: true,
    clientUseUrl: true,
    componentAliases: true,
    componentClientOnly: true
  },
  //...
}

後は不要な機能を OFF ( false ) にしてビルドするだけで、 "SUPER slim builds" ができる。

検証

npx create-nuxt-app で作成したイニシャルな Nuxt プロジェクトの、バンドルアナライザ ( nuxt build -analyze )でサイズ比較。

結果

features 全部 ON （デフォルト） : 578.53KB

features 全部 OFF : 486KB

100KB 程スリムになっている。（ commons.app.js から vue-meta が消えているのも目視できる）

しかしながら Gzipped の状態では 10KB 程度の違いだったので、劇的に軽くなる訳ではない。
加えて全部 OFF にしてこれ且つ実験的機能ということもあるので、現段階では無理してプロダクション環境に導入するほどではないというところか。

将来的には

A REALLY REALLY nice improvement to support minimal builds for nuxt. Can't wait to also have router disabling support. With nuxt 3 we can have nuxt to be used like:

Create app.vue
npx nuxt dev

TADA! A fully minimal/universal/efficient vue app is ready!

vue-router の無効化や、使われていない機能の自動検知なども考案されている。

☕

ペライチの LP を作りたい時なんかに良いかもしれません。（そもそも Nuxt を使うかどうかは置いておき）
Nuxt.js がますます便利・スマートになっていきますね。
Dev チーム、コントリビューターの皆さんに感謝。

$Thank$ $you.$