Serve the JS files in Express separately

I am facing issues with my webapp loading too slowly when using the express.static middleware to serve all my js files. I am considering serving each js file only when needed, such as when serving the html from jade that uses the js file. I have attempted using .sendFile(), but it doesn't seem to be working. I am not sure if this approach is incorrect for my purpose or if I simply lack knowledge on how to use it.

Is there a method to dynamically serve up js files to avoid load time until necessary, or should I accept the slow load times, minimize my js, and serve it all statically at the beginning?

javascriptnode.jsexpress

Answer №1

My suggestion for solving your issue is to utilize the async attribute in the script tag

A script that will be executed asynchronously as soon as it becomes available:
<script src="demo_async.js" async></script>

Another option is to use the defer attribute

A script that will not execute until after the page has finished loading:
<script src="demo_defer.js" defer></script>

Answer №2

when utilizing a server, ensure to configure nginx to serve static files.

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

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

javascriptvue.jsswiper.js

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop

I am currently developing an Electron application that includes a custom Notification feature. This feature involves html5 divs appearing and disappearing as necessary on a frameless, transparent, always-on-top window. Although the feature works well, I s ...

htmlnode.jsreactjswindowsnotifications

What is the best way to export a MongoDB query result as a CSV file while

I am currently dealing with a collection that contains over 5 million records. The task at hand is to query this data and send it to the client as a CSV file. Initially, when the number of records was low, we simply looped through them, wrote them into a f ...

node.jsmongodbexpressmongoose

AngularJS: The delay in updating variable bindings following a REST API call

When utilizing a REST service, I wanted to implement a variable to show whether the service is currently loading or not. Controller $scope.loading = true; $http.get('/Something'). success(function(data, status, headers, config) ...

javascriptangularjsrestfont-awesome

What is the best way to insert a record into the rth column of the nth row in a table

In the table I'm working with, there are 6 columns and only 5 of them have data filled in. The last column is currently empty for all rows. I am now trying to populate the last column of each row with some data. Can someone guide me on how to use a f ...

javascriptjquery

Serializing intricate objects using JavaScript

I'm curious if there are any options outside of npm for serializing complex JavaScript objects into a string, including functions and regex. I've found a few libraries that can do this, but they all seem to depend on npm. Are there any good seri ...

javascriptserialization

After the completion of populating, you can access the Node.js hashmap in AWS Lambda

Currently working on a lambda function in AWS, navigating the world of node.js for the first time. I suspect that the issue I'm facing is related to nodejs being asynchronous and could potentially be resolved with promises / async / await. However, no ...

node.jsamazon-web-servicesasynchronousamazon-s3promise

When I decide to incorporate both BootstrapVue and Vuetify CSS frameworks into a single project

Can I incorporate two CSS frameworks into my current Nuxt.js project? Does anyone have any insight on why it might be beneficial to use two different CSS frameworks in a Vue.js project? Please provide some guidance on this matter. I am looking to optimize ...

javascriptvue.jsvue-test-utils

When converting to a React Functional Component using Typescript, an error occurred: The property 'forceUpdateHandler' could not be found on the type 'MutableRefObject<Spinner | null>'

Looking to convert the App component in this CodePen into a Functional component using Typescript. Encountering an error when attempting to run it: ERROR in src/App.tsx:13:14 TS2339: Property 'forceUpdateHandler' does not exist on type 'Mu ...

javascriptreactjstypescriptreact-typescript

Step-by-Step Guide for Offline Installation of NPM Modules for Nuxt.js on a Server

Currently undertaking the development of a universal app using nuxt js. It seems that the server lacks an internet connection. Is there a way to construct the application with all necessary dependencies or manually install them? Warm regards ...

node.jsvue.jsnuxt.js

angular-bootstrap-mdindex.ts is not included in the compilation result

Upon deciding to incorporate Angular-Bootstrap into my project, I embarked on a quest to find a tutorial that would guide me through the download, installation, and setup process on my trusty Visual Studio Code. After some searching, I stumbled upon this h ...

javascriptnode.jsangulartypescript

Locate all elements by a segment of the identification attribute

Is it feasible to achieve the following: I possess a collection of divs, all having IDs that conclude with '_font', such as 'body_font', 'heading_font', 'tagline_font', and so on. Is there a method to retrieve thes ...

javascriptjquery

Get the contents inside the window.open using Javascript

First and foremost, I want to acknowledge that I understand the likelihood of this failing due to cross-domain restrictions - just seeking confirmation on that. Here's my approach: I have a window that I open using JavaScript. Subsequently, I make an ...

phpjavascriptajaxcross-domain

Using Input Mask with TextField Component in Material-UI with React Hook Form

Currently, I am trying to utilize the MUI's TextInput component alongside the MaskInput component from react-input-mask and react-hook-form. Despite everything appearing to be functioning correctly, an error message related to using refs keeps popping ...

javascriptreactjsmaterial-uireact-hook-form

Limiting the style of an input element

How can I mask the input field within an <input type="text" /> tag to restrict the user to a specific format of [].[], with any number of characters allowed between the brackets? For example: "[Analysis].[Analysis]" or another instance: "[Analysi ...

javascriptjqueryhtml

Calculate the duration in seconds using the console

Is it possible to display the time of an action in seconds instead of milliseconds using console.time? Below is my code: console.log('start load cache'); console.time('cache load ok executed in') // loading from mongo console.timeEnd( ...

javascriptnode.jsconsole.log

js include exclude switch a category

Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...

javascriptjqueryhtmlcss

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website

My Vue app is quite large, built with Vuetify, and I recently integrated vue-i18n into it. The json translation files are set up correctly, and the $t() calls work fine in my components and other .js files. However, I'm struggling to change the locale ...

javascriptvue.jslocalizationvuetify.jsvue-i18n

Leveraging npm to exclusively install the necessary packages for the existing project

Starting my journey with node/npm has brought about a lot of challenges for me. Figuring out the correct path to install packages Loading the package in Node I envision having a designated package folder containing only the necessary packages for my curr ...

node.jsnpmpackage

Ways to incorporate NPM packages into your browser projects using TypeScript

This is the current setup: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <script src="../node_modules/systemjs/dist/system.js"></script> <script src="../node_modules/lodash/in ...

javascriptnpmtypescript