Slash Your Load Times: Shrink the Chunk-Vendors.js Size in Vue3

Picture by ThisisEngineering RAEng in Unsplash.

You are not a developer if you haven’t found yourself with an over 2MB chunk-vendors.js size file. I was in a similar position where the performance of the website was slowing down due to the chunk-vendors.js file size. Yes! It is frustrating because you cannot just find this file in your Vue project and try to reduce the file size or optimize the functionalities. I was in a similar position so I feel your pain. However, after some googling, I found ways to reduce the chunk-vendors.js size and improve the overall website performance.

What is a Chunk-Vendors.js file?

Before diving directly into the solution, we must understand the problem chunk-vendors.js file really does. According to our best AI friend:
In Vue3, the chunk-vendors.js file is a JavaScript file that contains all the third-party library dependencies used in your Vue3 project. These libraries are bundled together in this file by the Vue3 build process to reduce the number of HTTP requests made by the browser when loading your application. The chunk-vendors.js file is usually one of the largest files in a Vue3 project, and optimizing its size can significantly improve the loading speed of your application.

Problem

The idea is to optimize the chunk-vendors.js execusion time in order to not exhaust the network as below.

Screenshot from Lighthouse report — actual project

We are getting a red flag regarding the network payloads. Which is overall interfering with website performance. This is not in the production enviroment.

Screenshot from the Network

Solution

There are many solutions to tackle this problem. Some solutions were suggesting to use async functions when calling the components in order to not load everything at the same time. However, the optimal solution which seem to solve my problem was to optimize the webpack in vue.config.js file.

 configureWebpack:{
    mode: 'development',
    devtool: false,
    optimization: {
      splitChunks: {
        
           
        chunks: 'all',
        minSize: 15000,
        maxSize: 250000,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        enforceSizeThreshold: 50000,
        
      },
    
     
    },

  }
,

This is a configuration object for Webpack, a popular bundling tool used for JavaScript applications. It specifies various settings that can affect how Webpack bundles your code.

Here’s what each setting does:

• mode: 'development' sets the mode of Webpack to development, which optimizes the output bundle for development, with features like readable code and helpful debugging messages.
• devtool: false turns off source mapping, which allows for easier debugging by mapping the code in the bundle back to its original source files.
• optimization: {} is an object that contains optimization-related settings for Webpack.
• splitChunks: {} specifies how Webpack should split the output bundle into multiple chunks, which can help reduce the overall size of the bundle.
• chunks: 'all' specifies that all types of chunks (initial, async, and all) should be included in the split.
• minSize: 15000 specifies the minimum size of a chunk in bytes before it can be split.
• maxSize: 250000 specifies the maximum size of a chunk in bytes before it should not be split.
• maxAsyncRequests: 30 specifies the maximum number of parallel requests that can be made for async chunks.
• maxInitialRequests: 30 specifies the maximum number of parallel requests that can be made for initial chunks.
• enforceSizeThreshold: 50000 specifies a threshold size (in bytes) above which chunks should not be split, even if they would otherwise meet the other splitting criteria.

Overall, this configuration is optimizing the output bundle for development by splitting it into multiple smaller chunks based on their size and type.

Optimizing the size of the chunk-vendors.js file can significantly improve the load times of your Vue 3 application. By employing strategies such as analyzing and trimming unnecessary dependencies, leveraging code-splitting techniques, and utilizing Webpack's optimization options, developers can significantly reduce the size of this file, leading to faster page loads and improved user experience. By taking the time to implement these strategies, developers can effectively "slash" their load times and improve the performance of their Vue 3 applications.

Join Medium with my referral link - Eniela P. Vela