Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/02/blog-post.html
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/02/loading-script-files.html
Loading Script Files
February 18, 2025
2025
February
19
02:39 AM
A starter code to load JavaScript files in queue for a small JavaScript app.
Introduction
There are times when one would prefer loading JavaScript files using <script> tags rather than import/export. This starter code provides a simple code alternative to a full featured script loading library, for your small web app.
In this code, the main entry point will be a module and the rest are a non-module scripts.
import { loadScripts } from './js/infrastructure/script-loader.js';
loadScripts([
{
urls: [
"js/main-component.js",
"js/ui.js",
],
callback: () => {
console.log('App ready.');
},
},
{
urls: [
"js/components/a-component.js",
"js/components/b-component.js",
],
},
]);The reason, is that one may want to import the URLs into a build script, e.g. to build a cache manifest file for Progressive Web App (PWA).
Takeaway Code
Recommended project directory tree:
.
├── js/
│ └── infrastructure/
│ └── script-loader.js
├── index.html
└── index.jsjs/infrastructure/script-loader.js
Repository: script-loader.js
index.html
<script src="index.js" type="module"></script>index.js
import { loadScripts } from './js/infrastructure/script-loader.js';
loadScripts([
{
urls: [
// "js/main-component.js",
// "js/ui.js",
],
callback: () => {
console.log('App ready.');
},
},
]);
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
https://vanillawebdev.blogspot.com/2025/02/blog-post.html
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
https://vanillawebdev.blogspot.com/