Dear pals,

I have an online app site which need 11 JS files including jQuery & D3.js files. I need to compress it into a single file and it's easy to use . I check some but need node.js and complex stuffs. I found http://jscompress.com/ but it's not working Application error in web site . Please advise a solution.

Thanks,
Anes

Dani AI

Generated

Good call by and to avoid minifying already-minified files and to offload widely used libraries. Practical, low-risk plan: keep jQuery (and optionally D3) on a CDN so users can reuse cached copies, then concatenate only your app-specific files in dependency order (plugins before code that uses them) and run one minifier over that single file. CDNs reduce latency and improve caching for common libraries. (developer.mozilla.org)

A simple, no-build-server workflow you can try right now (on macOS/Linux or WSL): concatenate the seven app files in the correct order, then minify and produce a source map. For example:

cat utils.js tooltip.js lineChart.js legend.js discreteBar.js discreteBarChart.js axis.js > common.js

terser common.js -o common.min.js --compress --mangle --source-map "url=common.min.js.map"

Terser (CLI) accepts multiple input files, compress/mangle flags, and source-map options — it’s a solid, modern minifier for ES5+ builds. (terser.org)

Common pitfalls that cause the “undefined” errors you saw: files concatenated in the wrong order, plugins loaded before their host library, or Automatic Semicolon Insertion biting you when a file lacks a trailing semicolon or starts with (/[ (minified files often omit safe separators). If you see errors after bundling, test by loading the original (non-minified) files in the same order to confirm dependency problems, then lint the sources and ensure each file boundary is safe (add a trailing ; or wrap modules in an IIFE). Also generate source maps so you can map runtime errors back to original files. (developer.mozilla.org)

If you want a repeatable build pipeline (and don’t mind installing Node), use a bundler like Webpack or Rollup — they handle dependency graphs, code-splitting and integrate minifiers/source-maps for you. For tiny projects the cat + Terser flow is simplest; for larger apps, move to a bundler so the process is reproducible and testable. (github.com)

Summary checklist

  • Exclude jQuery/D3 to CDN (use SRI if loading third-party).
  • Use non-minified sources for concatenation.
  • Preserve dependency order.
  • Add semicolons or IIFE borders where needed.
  • Minify once with Terser and generate a source map.

This follows the practical advice you’ve already got from and while adding a clear build/test sequence and quick troubleshooting steps.

Recommended Answers

All 13 Replies

try out www.blimptontech.com
Very similar to jscompress but actually works, is running on UglyfyJS2 and is regularlly updated. The file combine feature rocks as well.

HTH

Dear dingoellis,
I check your URL and test . I have 11 js files so I upload all and try . But I got a very small file and it's not included the content of jQuery and some other files . When I test the code using that JS got error of "undefined" stuffs . So I believe it's not good for multiple files .

Please advise .

Thanks,
Anes

Without seeing the actual files you are trying to compress I would not be able to guess why it did not work for you.

I just tested it with a bunch of files on test site I have and it combined them all for me, and had no issue using the combined file. I have also used it a few other times as well and not hit an issue.

Could it possibly be a syntax error in the actual code before you try and minify it? Will dig out an old site that I know has around 20 js files and will try combinging them to see if there is an issue.

Dear dingoellis,
any way it's not problem of used files . For your reference I attach all the
files with this post . please check and advise me .

Thanks,
Anes

Well before I even start I can tell you that trying to run minified code through a minifier like UglyfyJS will only cause you many heartaches. So try again only using all non minified sources.

If you still have problems after that post the zip with all non minified code and I will give it a shot.

@Dingo, that is 99% going to be the cause of the problem
files already minified individually and cant be stitched together
too many files for speed, by http protocol 2 at a time
I use jspretty to un-minify javascript files, then the text versions will stitch together and minify on any of the prior mentioned minifiers

other ways to speed up http

create subdomains pointing to the same folder structure
http can dl 2 files each from 3 domains concurrently
2 from www.mysite.com
2 from ww2.mysite.com
2 from ww3.mysite.com
where all three subdomains point to the html_root and you rotate the href in the <script> tags between www,ww2,ww3
instead of only 2 from www

enable mod_DEFLATE or mod_gzip for .html .php .css .js files in .htaccess,

Yes I get that, that is why I told that is where to start seeing why he is having issues.

I would not unminify concatednated sources, you should always have a production version and dev version. Since you will loose your variable naming when its concatenated. Jspretty and similar "prettifier" type programs will not give you the same source as before it was concatenated.

Edit:
I just finished my test of an old site with lots of JS files 21 total to be exact. It is now running off a single file and had no issues with combining them all.

So first try using non-minified sources and try again. That should solve everything for you.

He is using 3rd party production code, the Jquery library

If it wasnt downloaded to his site, but used the distribution href as recommended, then the files would 99% likely be in the browser cache from other user's implementation, and there is no time lost to download.
But the op did not read the instructions then, so I assumed they would not want to be told "ya shoulda" now
so
. Ya Shoulda:
the Jquery library is used a lot, it is normally referenced in scripts from its distribution site at google code, then the file is going to be already in the user's cache and you dont have to reload it
the identical file referenced from a different Href, requires downloading again
the corrected script reference to the jquery library is

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
If you feel you must do it yourself, with all the penalties that incurs for time and portability, goto jquery.com and download the uncompressed/development version

I agree that would be the best way to solve his third party code. I just assumed he did not want to since he was trying to minify all that into a singular file. I would do the same as your suggestion for JQuery.

Then any others that are third party that can not be done that way once unminified can be combined.

Dear dingoellis,almostbob:
I can understand the case of jQuery , I plan to make it as separate in CDN . that's good . So only 7 files need to make single one . i.e utils.js, tooltip.js, lineChart.js, legend.js, discreteBar.js,discreteBarChart.js , axis.js from the attached file list .

May I test it and give feedback .

Thanks alot @dingoellos &

Anes

Combining only those should work out fine for you.

Dear dingoellis,
I create a new file as u suggest now , rough checked feel it include ALL files content . I will test that in my office and let you know result. I attach my resultant js of (utils.js, tooltip.js, lineChart.js, legend.js, discreteBar.js,discreteBarChart.js , axis.js)
as common.js here

Thanks,
Anes

Yon can try this

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.