開発と本番でコードを分ける

process.env.NODE_ENV で分岐すると、開発時のみ必要なコードを仕込むことができます。

if (process.env.NODE_ENV !== 'production') {
  // 開発時のみ必要なコード
} else {
  // 本番用コード
}

例えば、Nuxt.js で開発時は API からデータを取ってきて、nuxt generate 時は payload をそのまま data に流し込みたいなら、以下のように書けます。

$api はプラグインから inject したものです。

<script>
let asyncData = null

if (process.env.NODE_ENV !== 'production') {
  asyncData = async ({ $api }) => {
    const {
      'data':
        'contents': posts
      }
    } = await $api.get('posts')
    return { posts }
  }
} else {
  asyncData = ({ payload }) => payload
}

export default {
  asyncData,
}
</script>

また、require() したモジュールなども丸ごとバンドルされなくなるので、開発時のみ必要なモジュールは if (process.env.NODE_ENV !== 'production') 内でインポートすれば、ビルド時のスクリプトサイズを大幅に減らすことができます。

if (process.env.NODE_ENV !== 'production') {
  const hljs = require('highlight.js/lib/core')
  hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'))
  hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'))
  hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'))
  hljs.registerLanguage('shell', require('highlight.js/lib/languages/shell'))
  hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'))
  hljs.registerLanguage('ini', require('highlight.js/lib/languages/ini'))
  hljs.registerAliases('css', { languageName: 'scss' })

  const { decodeHTML } = require('entities')

  asyncData = async ({ $api, params }) => {
    const { 'data': post } = $api.get(`posts/${params.id}`)
    post.content = post.content.replace(/<pre><code>(.+?)<\/code><\/pre>/gims, (match, p1) => {
      const { language, value } = hljs.highlightAuto(decodeHTML(p1))
      const langClass = language ? ` lang-${language}` : ''
      return `<pre><code class="hljs${langClass}">${value}</code></pre>`
    })
  }
} else {
  asyncData = ({ payload }) => payload
}