I've been tasked with cleaning up a project that contains around 45-50 separate .js javascript files. I'm trying to figure out the most effective way to reduce their loading size. Should I combine all the files into one using npm or gulp? Or should I consider installing a module loader like webpack?
For those who are already combining, compressing, and obfuscating their code but do not want all files to be loaded on every page due to a large bundle, there is a solution like the Commons Chunk Plugin provided by Webpack.
This handy plugin analyzes the dependencies for each page specified in your Webpack.config file and identifies which modules are needed across all pages. It then splits the code into two bundles: a "common" bundle containing modules required by every page, which must be included with a script tag on all pages:
<script src="commons.js" charset="utf-8"></script>Additionally, it creates an individual endpoint bundle for each specific page that can be referenced in a script tag placed after the commons script tag:
<script src="specificpage.bundle.js" charset="utf-8"></script>As a result, a single page will not have to load modules that are only utilized on other pages.
It should be noted that this functionality is specific to Webpack and may not be available as a Gulp plugin, as the plugin needs to understand all endpoints to determine common dependencies.
For a comprehensive guide, I recommend checking out the fantastic resource at https://github.com/thedaviddias/Front-End-Checklist
Some key recommendations include:
High priority should be given to JavaScript Inline: Ensure that you do not have any JavaScript code mixed with your HTML.
Concatenation is important: Make sure your JavaScript files are concatenated.
Minification is crucial: Ensure your JavaScript files are minified by adding the .min suffix.
To achieve these optimizations, consider using package managers like gulp, grunt, or webpack (among the popular choices). Choose the one that suits your preferences.
If webpack appeals to you, start with a simple starter kit for better understanding: https://github.com/dfa1234/snippets-starter
One option is to focus on concatenation and minification by utilizing tools like gulp-concat for combining files and gulp-minify for optimizing code.
Instead of manually creating scripts, consider using a generator like yeoman, such as Fountain, to save time on writing repetitive concatenation/minification tasks.
In addition, implementing lazy loading with tools like RequireJS or leveraging built-in support for lazy loading modules in frameworks like Angular can enhance application performance.
EDIT: For even greater performance improvements, consider installing a compression tool on your server, such as compression for NodeJS.
In my personal view, the most effective approach would involve thoroughly understanding the project's purpose before proceeding with a refactor. Simply concatenating code will not solve any underlying issues; it is merely a superficial deployment step.
Take the time to evaluate the technologies being used and consider implementing a more modern stack for long-term maintenance. Starting with a seed project that includes ES6, webpack, Babel, and establishing a well-maintained repository with proper modularity and dependency management could be beneficial.
Once this foundation is set, improving load times can be achieved by integrating suitable tools during the build process (such as babel and webpack).
Consider incorporating unit tests into your workflow to ensure continued progress and efficiency :)
We are currently utilizing JEST version 21.2.1 Our Jest Configuration: "jest": { "preset": "jest-puppeteer", "testURL": "http://localhost", "testEnvironment": "jsdom", "moduleNameMapper": { "\\.(jpg|j ...
In my project, I have a configuration file called .npmrc which contains the following settings: runtime = electron target = 1.7.9 target_arch = x64 disturl = https://atom.io/download/atom-shell build_from_source = true I also have a package.json file wit ...
I can't seem to figure out why using the function name in setInterval is causing issues, while passing an anonymous function works perfectly fine. In the example that's not working (it's logging NaN to the console and before the first call, ...
Encountering a problem when trying to run grunt following npm installation. C:\Users\XXXX\git\projectname\cartridges>grunt Loading "Gruntfile.js" tasks...ERROR >> Error: Module '@tridnguyen/config' cannot be fou ...
Is it feasible to retrieve individuals' UDIDs when they visit your website? If this is achievable, could you recommend a helpful tutorial for me to follow? ...
Here's a query that may seem straightforward. I have two collections in MongoDB - one named "users" with an objectId, and the other named "listings" which has the userId. I am looking to retrieve documents from the listings collection by searching fo ...
Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...
Currently, I am working on implementing Class Components for a project involving a main picture and a smaller pictures gallery stored in an array. The overall structure consists of an all pictures container that houses both the main picture and smaller pic ...
Here is my attempt at solving the problem: HTML <ul class="tree"> <li> <span>First Node</span> <ul> <li v-for="(tree, i) in trees" :key="i"> <span v-text="tree. ...
I have created a form in HTML that utilizes JavaScript to pull data from a database. I am looking to style the form, but I'm unsure of how to proceed. Below is the form along with some CSS code. How can I integrate the two together? <form id=" ...
Hey guys, I need some help with my code. I've been trying to create a button that will shift the window's Y position to center the "Box - 5" div vertically through an onclick event. Basically, I want to make sure the "Box - 5" div is positioned i ...
Encountering an issue with npm install while setting up my application on Ubuntu 16 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80eeefe4e5adf3e1f3f3c0b4aeb5aeb0">[email protected]</a> install: `node ...
While working on a JavaScript test, I came across an interesting observation related to the let keyword. Take a look at this code snippet: let variable = "I am a variable"; console.log(window.variable); Surprisingly, when I tried to access the variable p ...
In the company where I work, there is an automatically signed SSL certificate. This causes issues with installing certain npm packages. I have already tried adding strict-ssl=false in the .npmrc file or using the --strict-ssl=false command argument. Whil ...
I have encountered an issue with my server.js file that contains the code below. I also have a package.json file with dependencies. After adding the underscore dependency to the existing ones, I received an error when trying to run require("socket.io")(htt ...
Just started with ReactJS, I'm struggling to figure out why my page isn't displaying anything - <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...
Version 4.4.3 of Typescript Demo Playground Example -- interface IDocument { [added_: `added_${string}`]: number[] | undefined; } const id = 'id'; const document: IDocument = { [`added_${id}`]: [1970] } My Attempts: I made sure that id in ...
I'm struggling to comprehend why utilizing a double equals (or even a triple equals) in the condition of a for loop doesn't function as expected. Consider this example: for (i = 1; i == 5; i++){ console.log(i) } When I replace == with <= ...
Ungit seems like the ideal tool to gain a better understanding of git, thanks to its graphical interface that simplifies the process. I came across this video explanation which is very helpful in grasping how git functions, even if you don't intend to ...
Migrating from react-particles-js to react-tsparticles-js Hi there! I'm currently facing an issue with my ReactJS website here, which is deployed using Netlify. The error code below keeps popping up, and I believe it's related to the transition ...