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
Related
I have a one angular js app. The end user of my application is able to show app code from the browser's source code. How can I prevent this?
Is there any solution available by which I can hide or encrypt the code of my app?
Given Angular JS is javascript code run on the user's browser, everything will be available for the end user to inspect and tamper. Some of the below methods will make it difficult for a user to decompile and read the original source code:
JS Obfuscation tools
Uglify & Minify JS
Advanced tip: You can try using web assembly files (*.wasm) where you can write the code in C,C++ etc and compile it into .wasm file and include in the browser. This will help you to a certain extent, but even this method isn't complete fool-proof.
You can only minify and uglify which renames the variables/functions, as the JS has to be executed on the browser. You can use Gulp to do this.
However, you can also explore/consider using a commercial tool like jScrambler which seems to have capabilities to protect JS
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
I have a node web app where i want to hide js files which I have created for the client side?
how can this be achieved? I do not want people viewing the files.
Node runs on the server. All the JavaScript that runs on the server can be hidden. Any JavaScript delivered to the client and run in the user's browser cannot be hidden (though it can be obfuscated).
You cannot "hide" the JS files since the JS interpreter also has to be able to access them.
You can however obfuscate them, so that they cannot be easily read.
It is not possible but you can use something like uglify to make the javascript unintelligible.
You cannot hide the js files but you can provide security to the JS files by minifying them.
You can find many minifier in the online.
JS Compressor is a one of the minifiers.
Try it.
I am new to AngularJS and Grunt world. I am trying to setup FE environment and want to figure out a way to serve compressed or uncompressed js and css based on url parameters.
For example, by default I want compressed files.. if I append
&debug_js=true //I want browser to serve uncompressed js files..
&debug_css=true //I want browser to serve uncompressed css files..
&debug_css=true&debug_js=true //I want browser to serve uncompressed js and css files..
Thanks in advance!
Was just thinking about this today! Here's what I came up with:
If you have access to server side, you could read the query parameter there and write out the uncompressed script references
If you want to do it client side, you could create simple function that document.write's out your script references depending on the query parameter
After looking at couple of other references, I found similar article which addresses this question:
Have Grunt generate index.html for different setups
The documentation for tinymce notes that one can compress all the javascript and components (which I assume includes plugins) into a single file. They do note reasons why one might not want to that as well.
Compressing into a static file
It's also possible to simply concatenate the necessary components and some boilerplate code into a single .js file. However you will always have to recreate this file if you want to use other TinyMCE plugins, or you upgrade TinyMCE. You will also probably want to configure your webserver to compress javascript files.
But assuming one actually did want to do it, how does one actually go about it? Build.xml does does not provide an appropriate task it seems. At least when I tried it the plugins did not seem to be included when I loaded tiny_mce.js.
There are some really excellent command line tools for this, but you can also do this easily with just a text editor. The simplest way is to just open each file, copy the contents, and paste the contents into a single JS file ("everything-all-together.js", say). You'll need to make sure you paste the files into the single file in the same order you would've put the script tags into the HTML doc. Once you have all the files all together, you can use tools like JSXMin, YUI Compressor, or Google Closure. There are also some tools online that do this, like http://www.minifyjavascript.com/. You can paste in the uncompressed JS and copy back out the compressed JS. This makes the build process really cumbersome, but if you just need to do this once, that will get you there.
The best way to do this is to do it as a build step for the site. That means when you make changes to the JS files, you rebuild the compressed JS file to include the changes as well. This can be a cumbersome step if you're iterating quickly and changing files over and over again. You don't want to have to rebuild the compressed file with each save. You can solve this by setting up development and production modes of the site. When being loaded in development mode, the JS files aren't grouped together. When all the necessary changes are made, you'd rerun the build step to generate the single compressed JS file. To do the minification from the command line, you'd probably want to use Google Closure: https://developers.google.com/closure/compiler/. If you download the compiler app, you can do the following:
java -jar compiler.jar some-file.js some-other-file.js > compiled.js
That will generate a file called compiled.js that includes the contents of some-file.js and some-other-file.js in a minified format. You can specify as many files to compile as you need to. Actually, I'm selling Closure a bit short to say it's just minified. It's also extremely optimized code. Pretty much every site should be doing this to all of there JS all the time unless they're already doing something better.
I hope I'm getting you (and the tinymce docs) right, but this sounds a lot like combining JavaScript files on the server side. This means taking the contents of all of your JS files, putting them into one file and returning that one to the client.
Why would you do that? Well, this should be obvious, but.. you reduce the number of HTTP requests to your server, which is always a good thing.
How do you do that? There are many solutions out there for all server-side languages and frameworks, I suggest doing a Google search for "[your language] javascript minifier" or something similar.
Hope this helps.