Optimizing the Gridsome/Vue.js core bundle size: Tips and tricks

Preparing to launch a static Gridsome website, the entire site currently weighs in at 518KB (including self-hosted, heavily subsetted fonts, and minified inline SVGs) before gzipping. While not excessive in size, there's still room for improvement.

After analyzing Chrome's code coverage tools, it was discovered that 88561 bytes of app.js (totaling 181166 bytes) are not being utilized - accounting for nearly half of the file. This raises concerns given the minimal dependencies on Gridsome and lightweight JavaScript code used. The culprit may be attributed to Vue.js or Gridsome itself, which runs on Webpack 4 and is capable of optimization, yet questions remain.

Is there a solution to reduce this unnecessary weight, or is it simply unavoidable? Should I consider building the website from scratch using vanilla JS to avoid such bloating?

Any advice would be greatly appreciated :)

javascriptvue.jswebpackgridsome

Answer №1

Recently launching a brand new Gridsome project, I noticed that the app.js file clocks in at around 181kB. According to Gridsome's documentation:

By default, Gridsome adds a 57kB min gzip JS bundle size (including vue.js, vue-router, vue-meta, and some image lazy loading).

After running gzip app.js on my built app.js file, it only reduced the size to 63kB. With the initial build being 57kB, it seems like reducing the file size significantly would require extensive customization.

This dilemma highlights one of the downsides of relying on prebuilt libraries and frameworks. While there are ways to optimize, the out-of-the-box experience may not yield substantial reductions in file size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Vuex state keeps acting mysterious by claiming to be undefined

Here is my post.js located in src > store > post.js: import Vuex from 'vuex' import Vue from 'vue' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { testState: 'Hello&apo ...

javascriptvue.jsvuex

Opening a window using Javascript with a PHP Ajax response

I'm attempting to use echo in a controller to return the content below in an AJAX response: $url = url('/expert-profile-view')."/".$request->ticket_id."/".$key->user_id; $url = "<a onclick='window.open('$url','m ...

javascriptphpjqueryhtmlajax

Obtaining the desired element from a function without relying on an event

Recently, I've been working on a sidebar with several links <sidebar-link href="/dashboard" icon="HomeIcon" :is-active="isActive()" /> <sidebar-link href="/test" icon="TestIcon" :is-active=&qu ...

javascriptvue.jsvuejs2

How can we identify all the foreign_key1 ids from a MySQL join table that have a specific foreign_key2 assigned to them that is within a specified list?

I have a scenario where I have two tables, Table A and Table B, connected by a many-to-many relationship. Table A: ID --- 1 2 3 Table B: ID --- 4 5 6 7 Table AB: ID | A_ID | B_ID ---------------- 8 | 1 | 4 9 | 1 | 5 10 | 1 | 6 11 | 1 | 7 ...

javascriptmysqlnode.jstypescriptsequelize.js

limited loop performance in Vue.js

Here is an array I am working with: return { items: [ { active: false, text: 'text1', textOutput: ''}, { active: false, text: 'text1', textOutput: ''}, { active: false, text: 'text1', ...

vue.jsvuejs2

Harness the power of a dynamic v-for loop within VueJS to bring

I have two yml files (one in Fr and the other in Nl), each containing a line called "language" with the respective language. Assume that I receive a list of words in both languages from the backend, which I save as listFr & listNl. My goal is to crea ...

vue.jsnuxt.js

Tracking tool for monitoring progress of HTTP POST requests

Hi, I am still a beginner when it comes to NodeJS and its modules. I could really use some assistance with creating a progress bar for an application I'm working on. Right now, the progress bar only reaches 100% upon completion and I suspect my piping ...

javascriptnode.jsajaxsocket.iorequest

jQuery disregards the HTTP request method and adds unusual query parameters to the URL

My current project involves utilizing a web service that requires POST requests containing a JSON string in the body. I've encountered some challenges while attempting to interact with this web service using jQuery: 1) jQuery appears to default to th ...

javascriptjqueryajaxhttp

An unexpected console error arises once TypeScript files are compiled to JavaScript and bundled using webpack

Currently, I am experimenting with three.js alongside type definitions from NPM (@types/three) in order to create 3D elements with intellisense. In my project, I have a TypeScript file structured like this: import * as THREE from "three"; let camera: TH ...

node.jstypescriptwebpackthree.jstypescript-typings

What could be causing the Autocomplete feature to display as undefined?

I'm encountering an issue where the Autocomplete box displays "undefined" even though it returns the expected results. How can I resolve this problem? import { Drawer, List, Typography, Switch, ListItem, ListItemText, ListItemSecondaryAction, TextFiel ...

javascriptreactjsmaterial-ui

Using the $group operator with a nested array component

Can you show me how to utilize MongoDB's aggregation feature to summarize the count of each reason_id? I have noticed that there are 2 counts for "reason_id = KW7Kcsv7835YZeE3n" and 1 count for "reason_id = KNcKQCjhFzha3oLfE". Below is the dataset: ...

javascriptmongodbaggregation-framework

Using Vue to set the column span

I keep receiving an error with the code snippet below: <th style="padding-right: 0px;" v-for="n in modelClustersList" colspan="{{modelClustersList.length}}"> It's strange that I am able to use {{modelClustersList.length}} elsewhere without an ...

vue.jsvuejs2

javascript string assignment

Is it possible to conditionally assign a string based on the result of a certain condition, but for some reason, it's not working? var message = ""; if (true) { message += "true"; } else { message += "false" } console.log(message); ...

javascriptnode.js

Is it feasible to dynamically incorporate various versions of Bootstrap within the head tag?

The CMS I'm currently working with has a strict dependency on a specific version of Bootstrap. However, there are features from Bootstrap 3.3.6 that I need based on the page being loaded in the browser. I initially considered using JavaScript or jQue ...

javascriptjqueryhtmltwitter-bootstrap

Django: Automatically redirecting if the URL was manually entered by the user

Is there a way to prevent users from manually entering a URL of a specific page? For instance, let's assume I have two pages - somepage.com/home and someplace.com/other. On the home page, there is a button that directs users to the /other site. I wan ...

javascripthtmldjangohttp-redirectdjango-views

When troubleshooting the "Uncaught reference error: require is not defined," the browserify command encountered the error message "Error: Cannot find module."

I am encountering a similar issue to @RachelD in the thread discussing the Uncaught reference error. When I execute the 'browserify' command following the instructions provided here, and using my directory as a reference, like so... myname@compn ...

javascriptnode.jsangularjsexpressbrowserify

Select a user at random from the reactions in the message

Is there a way to select a user at random from message reactions on Discord? Despite going through all the documentation, I'm still unsure about how to do this. ...

javascriptnode.jsdiscord.js

Verify whether the element appears twice in the array

Is there a way to determine if an element appears more than once in an array? var arr = [elm1, elm2, elm3, elm3, elm4, elm5, elm5, elm5, elm6, elm7]; if (elm appears multiple times in the array) { // code to be executed } else { // do somethin ...

javascriptarrays

Even though I am aware that the variable AJAX is attempting to return is not empty, it is still returning 'undefined'

I wrote a basic PHP script that retrieves information from a database and stores it in a multidimensional array: <?php //PHP code to fetch data from DB error_reporting(E_ALL); $db = new mysqli("localhost","root","pass", "Media") ...

javascriptphpajaxundefined

Determine the vertical dimension of an element through a JavaScript event listener

I've been working on creating an Apple-style image sequence scroller from a codepen demo. Here's the link to the original: https://codepen.io/jasprit-singh/pen/LYxzQjB My goal is to modify the JavaScript so that the scroll height is based on a p ...

javascripthtmlcss