With Vite, Vue.js can generate 400 requests from a single function invocation

Is it possible that there is a bug with Vite.js or is this behavior normal? I noticed that when using date-fns in Vite.js, it's making 400 requests. It seems like just one function call is resulting in 400 ajax requests being triggered by date-fns.

As a result, the page load time increases to 2 - 4 seconds after each reload. Am I overlooking something obvious here?

<script>
import { formatWithOptions } from 'date-fns/fp'

export default {
    setup() {
        const dateToString = formatWithOptions({ locale: 'en' }, 'yyyy-mm-dd')
    }
}
</script>

Screenshot: https://i.sstatic.net/ye2Jm.jpg

javascriptvue.js

Answer №1

This is a Vite development server. It should be functioning normally.

When you're ready, try building your application for production using the command npm run build, and then serve the contents of your ./dist folder. You could use a tool like pm2 to help with this process.

It's important to keep an eye on your bundle size. Make sure that unused parts of the library are not included in the final bundle to optimize performance.

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

Determine if a property of an object is an empty string in React Native

I am facing a situation where I have an object that may or may not have an image URL. { id: 1, term: "Research", imageURL: "", definition: "is a way of thinking and understanding various aspects of a procedure ...

javascriptreactjsjsonreact-native

Step-by-step guide to accessing the detail view upon selecting a table row in react.js

In my project, I have a table with multiple rows. When a row is selected, I want to display detailed information about that particular item. To achieve this functionality, I am utilizing react-router-dom v6 and MUI's material table component. Here is ...

javascriptreactjsreact-routermaterial-ui

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

javascriptnode.jspostgresql

Creating a dynamically changing AppBar component in material-ui-next React that responds to scroll events

Following the Material Design guidelines, the top app bar should exhibit specific behavior: When scrolling, the top app bar can [...] undergo the following changes: - Scrolling upwards hides the top app bar - Scrolling downwards reveals the top ...

javascriptreactjsmaterial-uiappbar

Adding a script to the head of a Next.js page by using the Script component

I need assistance with inserting tracking code from Zoho application into the Head section of each page in my Next.js application. I am currently using a _document.tsx file and following the instructions provided by Next.js regarding the use of the Next.js ...

javascripthtmlreactjsnext.js

Eslint is not functioning properly on the local machine

Having trouble setting up eslint for my project. When I try to run eslint --init, I keep getting this error: /usr/lib/node_modules/eslint/lib/cli.js:18 let fs = require("fs"), ^^^ SyntaxError: Unexpected strict mode reserved word at exports.runInThis ...

javascriptnode.jsnpmeslint

Tips on concealing a div until the value of a specific field surpasses zero

In order to ensure that users focus on the first section of the form before proceeding, I plan to hide the last section until a specific field has a value greater than zero. Check out my HTML code below: <div class="fieldcontainer"> <label>E- ...

javascriptjqueryhtml

Preventing the use of the <select> tag in JavaScript

As a beginner in JavaScript, I thought it would be a great idea to work on a simple Calculator project. I've already tackled the basics like addition and subtraction, but now I'm contemplating adding a squareroot function to it. The design incl ...

javascript

What's the Reason Behind My Array Populating on Rebuild but Not on Page Refresh?

I am currently utilizing a tech stack that includes Vue 3 with Composition API, a Pinia store, TypeScript, a SQL backend, and Fetch to retrieve data through my .NET 6 API. Within my codebase, I have a User.ts class: export default class User { userNam ...

javascripttypescriptvue.jsfetch

"Switching to a new request in jqgrid will automatically cancel the current

I am using a jqgrid on my website to display data in JSON format retrieved from the server. The grid includes some blank cells which users can double-click on to update the data. However, I have encountered a problem where if I click too quickly on multipl ...

javascriptjqueryajaxjqgrid

Having trouble retrieving properties from a prop object in Vue.js?

I have encountered an issue where I am creating and passing an object using pdfjs into a child Vue component. While I can access the object itself, I am unable to access any properties of the object. This problem persists throughout all of the lifecycle h ...

vue.js

There was a problem uploading the Feed document using amazon-sp-api: Invalid initialization vector encountered

I'm encountering an issue while attempting to upload a Feed document to Amazon using the createFeedDocument operation of the Selling Partner API. Following the API call, I received a response object that includes the feedDocumentId, url, and encryptio ...

javascriptnode.jstypescriptcryptojsamazon-selling-partner-api

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

What causes the odd behavior where users need to click twice on a select-option for it to drop down/up after binding an eventhandler to the focus event using jQuery? $('input, select, textarea').focus(function() { $(this).addClass('input_ ...

javascriptjqueryhtmlinternet-explorer

JavaScript button is not functioning properly to increase or decrease the value in the input field

I'm facing an issue with the javascript increase/decrease buttons on my website. When I assign my JS variable as the class name of the input field, pressing the button results in all input fields being affected simultaneously: https://i.stack.imgur.c ...

javascriptjqueryhtml

JavaScript utilizes regex patterns to modify the value located between the characters within an input's name attribute

Can anyone assist me in creating a unique regex pattern to extract specific characters from the attribute values of HTML inputs? I'm dynamically cloning select elements and input text with button clicks, so I need to maintain the attribute name synta ...

javascriptjqueryregexjson

When I make a post request, I receive a response in the form of an HTTPS link, but it is not redirected to

I'm making a post request and receiving the response as follows: " [Symbol(Response internals)]: {url: 'https://login.somenewloginpage'}" My intention is to open a new page using that URL, but unfortunately it does not redirect t ...

javascriptnode.jsexpress

JavaScript code that triggers when a checkbox is not selected

I'm attempting to dynamically add an input field when a checkbox is clicked, with the intention of having the checkbox already checked by default. However, I am encountering an issue where the checkbox remains unchecked even after the input field is d ...

javascripthtmlcheckboxinnerhtml

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

javascriptphpjqueryhtmlcss

Obtaining an array from an object with Meteor and MongoDB

I've been struggling for about a week trying to accomplish a simple task with MongoDB. Here is the document I'm working with: { _id: "mkikuQzrYdyQjL7Ry", links:[ 1: "link1" 2: "link2" 3: "link3" 4: "link4" ] } Is there a way to retrieve al ...

javascriptarraysmongodbmeteor

Set the cookie to expire in 5 minutes using PHP, JavaScript, or jQuery

Is there a way to set a cookie in PHP that expires in 5 minutes? I am comfortable with the setcookie() function, but unsure about how to set the expiration time. Any explanation would be greatly appreciated. Could someone please guide me on how to achieve ...

phpjavascriptjquerycookiessetcookie