How to load javascript files dinamically on server side rendered website? - javascript

There is a website with a lot of javascript files. Website uses no framework just webpack, jquery and other plugins which are installed through npm. Just simple html site and laravel for backend.
All javascript files are required to main.js. And main.js files is added to template html file.
How to load for each page only files that are needed for that page? For example if you visit contact us page client should load only contact.js file without other files like products.js, register.js and etc.
Ofcourse I could include each js file to its page without loading all js files in one file. But maybe there is smarter way how it could be implemented on my situation from javascript and webpack side?
Now my javascript file size is 2mb, some pages needs only small part of it. So, I need for each page load only what is needed for it.

If it is a classical server, then I don't think it's possible. With a Javascript library like React, you could've considered code splitting.
I think your initial approach, which was splitting them into their respective .js files is, as it stands now, the best approach

May you use RequireJs ? It will optimize your Code &' Performance

Related

AEM 6.5.8 doesn't minify our client library javascript

on AEM system/console/configMgr, I turned on the minify option, and on my client library folder, I put jsProcessor=[min:gcc;obfuscate=true;languageIn=ECMASCRIPT_2019;languageOut=ECMASCRIPT3;compilationLevel=advanced]
Still, I see all other javscripts is minified. my client library file name has .min.js, but the content is still original javascript content.
Any idea?
Try rebuilding the clientlibs and see the logs when the time comes for minifying your clientlib:
http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html

Load view-specific JavaScript in Node.js Express application

I have web application with multiple views that share the same JavaScript but every view also have its own Javascript. It looks something like:
<!-- html up here -->
<script src="/src/js/bundle.js"></script>
<script>
// some view-specific Javascript
</script>
This ended up mixing my view file (HTML, etc) with my javascript and I'm not sure if creating and loading and external javascript file for each view is a better way.
What is the best approach to achieve do this?
A lot of it depends on how big your page specific js files are. If they are fairly small and most of the useful js is in your bundle, just make one bundle for all pages. If you have a lot of page specific js, you can either just include a second file along with your bundle, or you can create a different bundle for each page so that you only have on script tag on each page. Here is another thread on the issue, including a useful gulp script to automate the creation of multiple bundles

Why not to include a .js file containing Express.js code into an HTML file?

Not an unsolved problem, but rather a technical question, which I hope is valuable enough to ask.
As a beginner web developer, I attempted to give a variable from a .js file to an .html file, to display a variable from the former on-screen - I desired to do so by the <script src=... parameter. The .js file I wanted to include in the .html is the one that contains the code, which creates the HTTP server (as of yet a simple one) and loads the .html file.
I was told that it is a bad idea, and I should use JSON objects instead. THe problem is therefore solved, but I'm interested: why was it a bad idea to include the script of Express.js within the HTML file?
Express.js is Node.js web application framework. Lets simply call it backend javascript, which means it's designed to be run not in browser, but as part of Node.js application.
Just FYI:
There is a way to 'run' some Node modules in browser. There is tool called browserify .
Here what they are saying on their web site:
Use many of the tens of thousands of modules on NPM in the browser
I'm afraid that Express.js is not one of those 'many' modules.

Does creating javascript dll have any advantages over adding it directly using script tag?

I am working on project with larger javascript files.I can add these javascripts in one of the two ways.
1) create a separate class library project and have the javascript files there as embedded resource.Include a reference of the dll into the web project and then include those using scriptmanager as webresource.
2)Have these files in a separate folder and then simply add these files using the script tag and there path.
I am not going to paste the javascripts in my page within the script tag cause they would mess my pages mark up.
So I would like to know which one is better of the above 2 ways.In either of the 2 ways everytime i load the web page i see GET request for the js files.If i create a javascript dll will the browser cache it?
You can't create "javaScript dll". JavaScript is a client-side stuff, dll is server-side. No matter in which project your javaScripts are, it will still be sent to the client and executed there. So it makes no sense to put JS files to another project (especially as resources)
We usually want to minify and bundle the JS files, so the client will do less requests to the server and also to reduce the amount of data to transfer.
For minifying the JS files I would recommend to use Web Essentials extension to VS. It is very handy and can make web programming easier.
Minification will remove all unnecessary characters from the JS file and it will also reduce the length of the identifiers (like method names and variable names).
You can learn about bundling here. It is useful when there are more JS files to load to load all of them at once.

Does Require.JS prevent visitors from viewing/copying External Scripts?

I recently got into RequireJS and am integrating it into my backbone applications.
I noticed when looking at the source code that all individual javascripts are replaced by the bootstrap file, the line that reads:
<script data-main="js/main" src="js/require.js"></script>
And this line prevents me from viewing the attached files.
Does this mean that users are unable to hack their way into my external source code files if I load all scripts through the bootstrap file?
I am mostly concerned because I use a restful api route in my Backbone collections, and want to keep user data safe.
Thanks.
No, it doesn't mean that. It just means that scripts are loaded dynamically. Anybody can still download your JS files or look at them with any web debugging tool

Categories