Skip to main content

Vue 构建选项

Vue 为你提供了多种工具来微调你的应用。本指南涵盖了与 Ionic 框架最相关的构建选项。

🌐 Vue gives you several tools to fine tune your application. This guide covers the build options that are most relevant to Ionic Framework.

组件注册策略​

🌐 Component Registration Strategies

🌐 Local Component Registration (Recommended)

默认情况下，Ionic Framework 组件是本地注册的。通过本地注册，这些组件会被导入并提供给你希望使用它们的每个 Vue 组件。这是推荐的方法，因为它允许延迟加载和摇树优化在 Ionic Framework 组件中正常工作。

🌐 By default, Ionic Framework components are registered locally. With local registration, these components are imported and provided to each Vue component you want to use them in. This is the recommended approach as it allows lazy loading and treeshaking to work properly with Ionic Framework components.

这种方法的一个缺点是可能需要多次重新导入你的 Ionic Framework 组件，这可能会很繁琐。然而，我们认为你因此获得的性能提升是值得的。

🌐 The one downside to this approach is that it may be tedious to re-import your Ionic Framework components multiple times. However, we feel that the performance benefits you receive in exchange are worth it.

还要注意，本地注册的组件在子组件中不可用。你需要在子组件中重新导入你想使用的 Ionic Framework 组件。

🌐 Also note that locally registered components are not available in subcomponents. You will need to re-import the Ionic Framework components you would like to use in your subcomponent.

我们来看看本地组件注册是如何工作的：

🌐 Let's take a look at how local component registration works:

<template>
  <ion-page>
    <ion-content>
      <SubComponent></SubComponent>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonContent, IonPage } from '@ionic/vue';
import SubComponent from '@/components/SubComponent.vue';
</script>

在上面的例子中，我们使用了 IonPage 和 IonContent 组件。要使用它们，我们从 @ionic/vue 导入它们。之后，我们可以在我们的模板中使用这些组件。

🌐 In the example above, we are using the IonPage and IonContent components. To use them, we import them from @ionic/vue. From there, we can use the components in our template.

请注意，由于我们在本地注册这些组件，所以除非我们也在那里注册它们，否则 IonPage 和 IonContent 在 SubComponent 中都不可用。

🌐 Note that since we are registering these components locally, neither IonPage nor IonContent will be available in SubComponent unless we register them there as well.

有关更多信息，请参阅 本地注册 Vue 文档。

🌐 For more information, see the Local Registration Vue Documentation.

全局组件注册​

🌐 Global Component Registration

注册组件的另一种选择是使用全局注册。全局注册涉及在 main.ts 中导入你想要使用的组件，并在你的 Vue 应用实例上调用 component 方法。

🌐 The other option for registering components is to use global registration. Global registration involves importing the components you want to use in main.ts and calling the component method on your Vue app instance.

虽然这使得在你的 Vue 应用中添加 Ionic Framework 组件更容易，但全局注册通常并不理想。引用 Vue 文档的话：“如果你使用像 Webpack 这样的构建系统，全局注册所有组件意味着即使你停止使用某个组件，它仍可能被包含在最终构建中。这会不必要地增加用户必须下载的 JavaScript 数量。”

🌐 While this makes it easier to add Ionic Framework components to your Vue app, global registration often is not ideal. To quote the Vue documentation: "If you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download".

我们来看看全局组件注册是如何工作的：

🌐 Let's take a look at how global component registration works:

main.ts

import { IonContent, IonicVue, IonPage } from '@ionic/vue';

const app = createApp(App).use(IonicVue).use(router);

app.component('ion-content', IonContent);
app.component('ion-page', IonPage);

MyComponent.vue

<template>
  <ion-page>
    <ion-content>
      <SubComponent></SubComponent>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import SubComponent from '@/components/SubComponent.vue';
</script>

在上面的示例中，我们使用了 IonPage 和 IonContent 组件。要使用它们，我们首先从 main.ts 中的 @ionic/vue 导入它们。然后，我们在应用实例上调用 component 方法，并传入标签名以及组件定义。完成这些之后，我们就可以在应用的其他部分使用这些组件，而无需将它们导入到每个 Vue 组件中。

🌐 In the example above, we are using the IonPage and IonContent components. To use them, we first import them from @ionic/vue in main.ts. From there, we call the component method on our app instance and pass it the tag name as well as the component definition. After we do that, we can use the components in the rest of our application without having to import them into each Vue component.

有关更多信息，请参阅 全球注册 Vue 文档。

🌐 For more information, see the Global Registration Vue Documentation.

构建优化​

🌐 Build Optimization

预取应用 JavaScript​

🌐 Prefetching Application JavaScript

默认情况下，Vue CLI 会自动为应用中的 JavaScript 生成预取提示。预取利用浏览器的空闲时间来下载用户可能在不久的将来访问的文档。当用户访问需要预取文档的页面时，可以从浏览器缓存中快速提供该文档。

🌐 By default, the Vue CLI will automatically generate prefetch hints for the JavaScript in your application. Prefetching utilizes the browser idle time to download documents that the user might visit in the near future. When the user visits a page that requires the prefetched document, it can be served quickly from the browser's cache.

预取会消耗带宽，所以如果你的应用很大，你可能想要禁用它。你可以通过修改或创建你的 vue.config.js 文件来实现这一点：

🌐 Prefetching consumes bandwidth, so if you have a large app, you may want to disable it. You can do this by modifying or creating your vue.config.js file:

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete('prefetch');
  },
};

上面的配置将阻止所有文件被预取，而是在需要时加载它们。你也可以选择预取某些特定的代码块。查看 Vue CLI 关于预取的文档 获取更多示例。

🌐 The configuration above will prevent all files from being prefetched and, instead, will be loaded when they are needed. You can also select certain chunks to prefetch. Check out the Vue CLI Docs on Prefetching for more examples.

目录