Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.


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 を追加。


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!

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

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

$Thank$ $you.$

Help us understand the problem. What is going on with this article?
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
フロントエンドを少々。 Nuxt.jsが得意なふりをしています。


No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
Help us understand the problem. What is going on with this article?