Building as a single chunk only (Vue CLI config)

Ionic Framework Ionic Vue
1

Is it possible to prevent chunking up our project when building? What I’d like is for all the resources to be loaded on first load, so that the response time of the app is better and we avoid multiple requests for resources.

Example:

  • The first time a user loads our PWA the browser fetches about 100 chuncks of JS (this could be just one request)
  • Then when the user for the first time triggers an ion-popover, the browser has to first fetch an additional chunk before rendering the popover
  • Then when the user for the first time triggers an ion-modal, the browser has to first fetch additional chunks
  • And so on

In our use-case it is better to have a longer initial load time, for the PWA to then work blazingly fast once it’s loaded.

How would we go about configuring this? We are using the default tooling setup when starting a new Ionic/Vue project using the Ionic CLI.

2

In this case, we recommend pre-loading the specific components you need rather than bundling everything in a single chunk. For example, you can pre-load ion-modal by placing an empty ion-modal in App.vue:

App.vue

<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <ion-modal></ion-modal>
</ion-app>

<script lang="ts">
import { defineComponent } from 'vue';
import { IonApp, IonModal, IonRouterOutlet } from '@ionic/vue';

export default defineComponent({
  components: { IonApp, IonModal, IonRouterOutlet }
});
</script>
3

Thanks Liam, that a good solution for most projects.

If it is possible to configure webpack to use fewer chunks (via vue.config.js) that would still be a great option for us in this particular case.

4

That all really depends on what Webpack supports as Ionic Vue does not control Webpack bundling. Try looking at the Webpack config docs for maxChunks: LimitChunkCountPlugin | webpack