Optimizing Bundle Size

Removing unused scripts reduces the amount of data sent through the network and time required to make the page interactive because the browser has fewer scripts to process.

How to analyze bundle size? 🤔

You can check the JavaScript bundle size with tools like Webpack bundle analyzer (opens new window). In commercetools integration, this library is available out of the box. Just go to the root folder and run:

yarn build:analyze

This analysis provides a clear picture of each library used in your project and how they affect the JavaScript bundle size. Besides, you can decide whether you need replacements or remove any duplicate libraries found in your JavaScript bundle.

---

Let's look at example, where you can replace some package by own pure JavaScript solution.

• Scrolling to elements 🔝

Instead using vue-scrollto you can easily use JavaScript and Vue. Just like below.

<template>
  <div>
    <div
      class="container"
      ref="container" /> <!-- add the special ref keyword to the element you want to scroll to -->
    <SfButton @click="goToElement">Click me 🥳</SfButton>
  </div>
</template>

<script>
import { ref } from '@nuxtjs/composition-api';

export default {
  setup() {
    const container = ref(null);

    const goToElement = () => {
      container.value?.$el?.scrollIntoView({ behavior: 'smooth' });
    };

    return {
      container,
      goToElement
    }
  }
}
</script>

TIP

Web performance is important subject in modern web, so it's worth to check our Performance section (opens new window).