Help us understand the problem. What is going on with this article?

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

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

SUPER slim builds?

スクリーンショット 2019-10-29 0.53.45.png
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 )でサイズ比較。

結果

FireShot Capture 002 - configurable-features [28 Oct 2019 at 19_52] - .png
features 全部 ON (デフォルト) : 578.53KB

FireShot Capture 003 - configurable-features [28 Oct 2019 at 19_54] - .png
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!

https://github.com/nuxt/nuxt.js/pull/6287#pullrequestreview-282350753

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

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

$Thank$ $you.$

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした