为什么我的 Vue JS Nuxt 延迟加载组件捆绑在 app.js 中，而不是单独加载？

Question

我刚开始使用 Nuxt，但已经使用 VueJS 一段时间了。为了进行测试，我尝试延迟加载使用 create-nuxt-app 命令创建的教程组件。（我也尝试过我自己的组件，但又回到了一个新的应用程序来尝试让延迟加载工作）。不幸的是，该组件不是延迟加载的。

我的新应用程序中的索引页面非常简单。它有一个按钮来显示名为“LazyTutorial”的教程组件，以指示延迟加载。该组件使用 v-if 隐藏它，直到单击该按钮。

<template>
  <div>
    <h1>Welcome!</h1>
    <button @click="start">
      Show tutorial
    </button>
    <LazyTutorial v-if="showTutorial"></LazyTutorial>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'IndexPage',
  data () {
    return {
      showTutorial: false
    }
  },
  methods: {
    start () {
      this.showTutorial = true
    }
  }
})
</script>

Tutorial组件与原来的没有变化。

据我所见（例如：Debbie O'Brien's Nuxt Auto Components and Lazy Loading），这只是使用动态加载组件（nuxt.config.js 中的components:true）和“Lazy”前缀的问题在组件上。

该应用程序构建良好并按预期工作从用户的角度 - 但组件代码被捆绑到 app.js 文件中，它不是延迟加载的。当我点击按钮时它没有出现在网络选项卡中，因为它已经在应用程序文件中。

我运行在本地使用 npm run dev。

我是不是漏掉了一些配置设置？这里有什么问题？

这是我的版本号依赖列表：

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },

运行 Windows 10（如果相关）

Answer 1

Nuxt2 使用 Webpack4 并且（可能出于性能原因）它在开发过程中没有显示 .vue 组件的延迟加载。

也就是说，当您捆绑项目时（npm run build && npm run start 在您的情况下），它工作得非常好（可以在开发工具的网络选项卡中看到）。

作为旁注，Nuxt3 变体将是

<template>
  <button @click="shownComponent = !shownComponent">toggle me please</button>
  <lazy-test v-if="shownComponent" />
</template>

<script setup>
const shownComponent = ref(false)
</script>

并在开发期间正确导入它

这可能是因为 Vite 在这方面做得更好，或者可能有更明确的 HMR 设置。反正RC版本是really close so I would recommend maybe checking nuxtjs3。特别是如果你是 TS 的重度用户。

否则，您将需要查找并了解如何配置 Webpack 的 HMR 设置（免责声明：我不确定是否可行）。

为什么我的 Vue JS Nuxt 延迟加载组件捆绑在 app.js 中，而不是单独加载？

Why is my Vue JS Nuxt lazy loaded component bundled in app.js, not loaded separately?

components

lazy-loading

vue.js

vuejs2

nuxt.js