Errors when bundling javascript files of different pages into one - javascript

It looks stupid question, I'm using webpack to build static website
I wanted to bundle my JavaScript files of different pages into one
but some elements that I selected by JS that existing in home page and not in about page throwing error when I go to about page.
It's not effective just in console and I can ignore it
should I separate files ? if so is that possible to make webpack inject different pages with the proper JS file?
Thanks...

Try to make min files using webpack , or u cn use rollup.js
If possible please share code snippet.

Related

PWA not finding javascript files in directories

I'm trying for a while now to create a PWA in Oracle APEX by following some instructions on http://vmorneau.me/apex-pwa-part4/, but I'm having no luck in certain parts.
I've installed the demo to test it and see what's wrong, but I'm having the same issues with the demo app, namely some important files not being detected/found when I run it. I thought I had configured something wrong previously, but this time it was supposed to work properly.
Example, I have the app.js inside the js directory in Apex:
When I run the app, I get these messages:
I tried checking the file path the same way I tried to see if the manifest.json file was in the proper root folder, and it couldn't be found:
This looks like a common problem I see on the forums, that doesn't relate to the PWA concept. You'll probably find the same thing if you tried to refer to static files loaded into the workspace.
See Morten's example regarding a fixing the configuration
https://ora-00001.blogspot.com/2016/12/apex-plugin-files-and-404-not-found-in-ords.html
Or placed your files in the middle tier, using /i/ (or preferrably a custom location /c/)

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

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

Play framework: Missing semicolon error in jQuery/Bootstrap JS

I'm new at Play Framework and making my first project with it. I added jQuery and bootstrap.js to my main.scala.html:
<script src="#routes.Assets.at("javascripts/jquery-2.1.3.min.js")"></script>
<script src="#routes.Assets.at("javascripts/bootstrap/bootstrap.js")"></script>
When I run my application in a browser, I get the compilation error:
Missing semicolon in \app\assets\javascripts\jquery-2.1.3.min.js:2
You can see the screenshot here: http://oi61.tinypic.com/2lllklx.jpg
The same problem if I add only a bootstrap js, minified version or separate js files.
I don't change those files, I add them in the form they were originally - downloaded from jQuery/Bootstrap websites.
I tried to add semicolons manually, but there are hundreds of them missing. I don't think that's a good idea.
Maybe I should change some settings in the Play application?
You put a js file on app/assets/javascript, that folder is for files that need to be compiled, like coffee script files. So, jquery and bootstrap files need to be on public/javascript.
Ensure you have a route similar to this on conf/routes:
GET /assets/*file controllers.Assets.at(path="/public", file)
Anyway, I recommend you to use WebJars.

MVC Bundling Issue

i recently joined in a new company and found out they were using so many scripts in Layout.cshtml.as shown in fig
so in order to improve the performance,i used mvc bundling functions as shown
and referenced it on layout page with #Scripts.Render("~/bundles/jqueryval").but the problem is.many of the java scripts doesnt work any more especially jquery data table.what point im missing here?
I think in your scenario your js files are conflicting with each other ,solution for your problem is :
Use $.noConflict() to avoid conflicts between jquery's files :-
Follow this link :
http://api.jquery.com/jquery.noconflict/
if some js files are not working then just check the order of your js files also..
Try and check if the files are in the correct order.
If you are on local, you might have some setting to not load the .min file, happened to me once.
2 suggestions, add scripts after css and maybe start using requirejs, it will help you with the dependencies and async loading of the js

Different merged and minified js files in different htmls in one app

I have an express.js application, it renders pages on server and serves them on different routes - /home and /dashboard etc., for example, I use several js files, some on all pages, some not:
on home page I use: jquery.js, underscore.js, somemodule1.js, somemodule2.js
on dashboard: jquery.js, underscore.js, but somemodule3.js, somemodule4.js
I need to optimize an app, 'cause I don't want to include files on every html separately..
I need somehow to merge jquery and underscore in base-merged.js and other ones to home-merged.js and dashboard-merged.js. It would be nice to have them minified as well.
Do you now node.js module or maybe grunt plugin for that? The thing I've found - https://npmjs.org/package/merge-js but not sure this will work, I also tried to configure https://github.com/yeoman/grunt-usemin plugin with no luck..
Thanks!
Yes, by using one single minified js file you can easily achieve it.
You may try to use grunt-minified

Categories