On a regular VPS site I would use Minify to compress and combine multiple CSS/JS files so the site's only using 1 or 2 HTTP requests. A site I'm working on now has it's CSS/JS files hosted on Amazon S3 and served through Amazon CloudFront. Obviously Minify is a PHP5 app and not able to run on AWS.
I can compress the scripts easily before uploading but what's the best way to combine scripts on AWS S3 to reduce HTTP requests?
http://code.google.com/p/minify/
Minify combines and minifies JS/CSs on the fly.
S3 and CloudFront serve static files - you'll have to combine and minify them yourself before you upload. It's easy enough - concat the files together and minify with YUI Compressor or Google Closure Compiler (2 free cross-platform command-line minifiers).
It's usually convenient to have a script or build step that does this, something like:
#!/bin/bash
cat a.js b.js c.js | java -jar yuicompressor-1.4.2.jar --type js -o output.min.js
On Windows, another excellent option is Microsoft's Ajax Minifier.
When CloudFront receives a cold-cache hit it requests the content from the distribution's configured origin server. In most cases a S3 bucket is configured as the origin. So the easiest way is to combine and minify your JS and CSS is to store it in S3 as part of your build/deployment process.
If you really want to minify on-the-fly you can configure CloudFront to use a "Custom Origin". In this distribution configuration cold-cache hits would be requested from your server running Minify.
See the CloudFront documentation on creating distributions for details.
If you plan to serve static content from S3/CloudFront, I would recommend compressing your content ahead of time. Personally, I use Juicer. Once you've done that, you can gzip -9 your production files, and upload them to S3 with a Content-Encoding: gzip header.
The problem with compressing on the fly is the performance hit your site takes. CloudFront custom-origin support alleviates this a bit, but it would be really easy to automate your deployments with a tool like Capistrano that does this work for you. This is the approach I take, myself.
New – Gzip Compression Support for Amazon CloudFront, Check here.
Enabling Gzip Compression
You can enable this feature in a minute! Simply open up the CloudFront Console, locate your distribution, and set Compress Objects Automatically to Yes in the Behavior options:
Related
I have created a react application which is right now deployed with the production build.
yarn run build
serve -S build
Well I know it compresses the .js and .scss files and creates a build folder then serve.
The issue is does it compresses the images & videos files as well? If not how can I do that? because the project I am working on has a lot's of images & vidoes files which impacts a lot on performance and loads the page very slowly.
Kindly help with this...
React doesn't do those stuff. It is just a framework for development.
It is the web server's responsibility to handle those stuff, i.e. serve in your case.
But even that, it is a common practice that web servers don't apply additional compression to assets (fonts, images, videos, audios, etc.), because they are already compressed in the first place.
Take images as an example, common file formats like JPG, PNG, WEBP are compressed. Unless you are serving BMP or RAW, which you shouldn't, there is no point for web servers to apply any compressions to them.
I would like to deploy a Web App on NodeJS with some server side JavaScript code. Will this server side code be accessible by external users/hackers? Can someone copy or download this code somehow? If the JavaScript files reside in a non-public folder on the server, can users access it? Can the app work if JS files are not located in a public folder?
With a properly configured node.js server, server-side JS files are not accessible to the public. The server-side code runs only on the server and thus does not need to be available in any way to the public. It's the exact same as server-side PHP or Python or Java.
As long as you configure your server with appropriate security measures and do not allow your node.js server to "serve" any of your server-side Javascript files to the public, then they will not be available to the public.
This is, of course, different from client-side Javascript which runs in the browser which cannot be protected and will always be available to the public.
If the Javascript files reside in a non-public folder on the server, can users access it.
No.
Can the app work if JS files are not located in a public folder?
Yes. The server-side JS files need only be available to the node.js process, not to the public.
To add to the answer all you need to manage are server configurations for which files and directories are available to the public. You can also (and should know how to) manage file and directory permissions on operating systems. When you go into a server configuration file you explicitly permit which directories you are allowing to be served to web traffic; which files are used for configuration varies according to server type. You should get familiar with server configuration files and understand what they do before serving any web pages to the public. You should also know the different configurations on a server such as production settings versus development settings.
I used webpack to generate my bundle.js but since I was using some thrid party libraries the size is about 1MB. I use the compressed plugin and got a bundle.js.gz of 200kb. I used it and change the header to let the browser know it is compressed and it worked perfect. I am just worried about any side effects I am not seeing at first.
Can anyone tell me what could go wrong.
I don't foresee any problems. Another option, depending on your host, is to configure gzip on your http server. This will gzip on the fly and cache it for future requests (dependent on config).
Here are instructions for configuring Apache & nginx:
https://www.vultr.com/docs/gzip-compression-on-apache-and-nginx
I have the following in my Index.cshtml:
#Scripts.Render("/signalr/hubs")
In my BundleConfig.cs, I have the following:
.Include("~/Scripts/jquery.signalR-{version}.min.js")
With EnableOptimizations on, I get a nicely bundled vendor? package. But in my Sources, I see:
Why is this raw unminified JS getting loaded? How do I bundle/minify it?
SignalR's proxy scripts are dynamically generated at runtime at /signalr/hubs by default. They're typically small, on the order of a couple of kilobytes or smaller, so minifying them will not yield any performance benefits (perhaps zero benefit at all if they already fit into an entire Ethernet frame).
Additionally, the hubs themselves cannot have their internal symbols/identifiers minified because it exposes a "public API" that your code consumes - see how dynamic (or interfaced) "client method" calls inside your Hub class are transferred over the pipe, so those names must be preserved for the system to work.
Finally, IIS is usually configured to HTTP gzip-compress certain dynamically-generated content anyway, this includes the SignalR proxy scripts - further minification can be counterproductive (as the entropy of minified scripts can be higher than uncompressed scripts).
But if you believe you can safely compress them, or if you want to bundle them, and you're certain you don't need the benefit of dynamically-generated proxies to handle rapidly changing developer requirements, then you can generate them offline:
https://learn.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client
How to create a physical file for the SignalR generated proxy
As an alternative to the dynamically generated proxy, you can create a physical file that has the proxy code and reference that file. You might want to do that for control over caching or bundling behavior, or to get IntelliSense when you are coding calls to server methods.
Install the Microsoft.AspNet.SignalR.Utils NuGet package.
Open a command prompt and browse to the tools folder that contains the SignalR.exe file. The tools folder is at the following location: packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools
signalr ghp /path:[path to the .dll that contains your Hub class] - This command creates a file named server.js in the same folder as signalr.exe.
Put the server.js file in an appropriate folder in your project, rename it as appropriate for your application, and add a reference to it in place of the "signalr/hubs" reference.
I have been loading so many JS and CSS in my project.
To improve my site performance, I started with YUICompression integrated with Ant build.
So each time when I build the project it creates minified file with appending"-min.js"
Example: myscript.js after build, new file "myscript-min.js".
Now I have changing all the files to load myscript-min.js in my pages.
Is there any automation or simpler way to load the minify file.
Thanks in Advance!!!
In your code, try to determine the environment (production or development) from where you're loading the page. For instance, when developing on a local machine, you can check your IP address, a server environment variable (using Apache SetEnv), script path, etc. Using that data, either load the minified script (in production environment), or the separate scripts (in your development environment).
I am assuming that you're using a server side scripting language, like PHP. If you're serving static HTML files, it gets a bit more tricky (I'm thinking dynamic javascript loading or something).
If you (can) use PHP in your project then have a look at the minify project. It takes care of most of the chores. You are free to use uncompressed versions of your CSS and JS files, minify will compress them on-demand when these files are requested over HTTP.
If you're using PHP, just do the following:
Edit the apache config file on your production machine and add this line to httpd.conf (restart apache afterwards). On a shared hosting you should try .htaccess if you don't have access to httpd.conf.
SetEnv ENVIRONMENT production
This simply adds a variable to apache telling your that you're running in production mode. On your development machine, change the value "production" to "development" or whatever makes sense to you.
Then in your PHP file, you can switch between loading the full JS files and the minified one, like so:
if(isset($_SERVER['ENVIRONMENT']) && $_SERVER['ENVIRONMENT'] == "production")
{
... production minified JS here
}
else
{
... development unminified JS here
}