Reduce bundle size?

[seanockert]

When I compile my app via Webpack, the vue-tour.umd.js file is 204KB, which is far from lightweight. Do you know if there is any way to reduce this bundle size by removing certain dependencies or features? Thanks!

[mmorainville]

Hi @seanockert,

You made a point indeed... ^^' The thing is that we used the default vue-cli build command for lib (--target lib) which puts Vue in Webpack's externals, so it shouldn't be included in the final build (and it indeed isn't).

After analyzing the bundle, it looks like Popper.js is taking much space:

Apart from that, the other dependencies (hash-sum and jump.js) are quite small and if you look at the code, there is "only" two components (VTour and VStep) so I see no reason why the bundle is so big.

Anyway, we plan to release a version 2.x of vue-tour when Vue 3 is out that will also allow us to upgrade Popper.js to version 2. Hopefully it will allow us to reduce the bundle size as we'll be paying more attention to the build process.

In the meantime if you or someone passing by want to dive in and see what can be optimized (apart from getting rid of dependencies of course ^^), we'll appreciate the effort!

[glorat]

My 2c is that 200kb for this feature is not bad at all... unless it is slowing down your initial page render because it is in your initial vendor bundle.

This is easily worked around by some clever trickery to get webpack to do some code splitting. I set up a single component that wraps vue-tour entirely. E.g.

<template>
    <v-tour name="myTour" :steps="steps" :options="options">
    </v-tour>
</template>
<script>
    import VueTour from 'vue-tour';
    require('vue-tour/dist/vue-tour.css');
    Vue.use(VueTour);
   ...

Then somewhere in my app where I need to inject this Tour component, I ensure it is lazy loaded.

const Tour = () => import ('../Tour');
export default {
        name: 'MyLayout',
        components: {Tour},
}

Webpack can then split this into a separate bundle

[ricky11]

Is the lastest version ready? and is it compatible with vue 2.x? what is the bundle size now?

[ricky11]

in this example above @glorat your component will show a Vue is undefined error, because the component doesn't have vue imported no?

[nyfer]

This link talks about performance i.e tree shaking https://popper.js.org/docs/v2/performance/
// ❌ Imports all of Popper! import { createPopper } from '@popperjs/core';

// ✅ import { createPopper } from '@popperjs/core/lib/popper-lite';

Is it possible to customize it using popper-lite