I have a file inside my npm package that is 307kb of size. When I download that file through unpkg - that very same file is 73.2Kb. I am quite puzzled on how the same file downloaded through the network is smaller.
Here is the size when downloaded through the network - link:
Size on my local machine when installed via npm (link, version 0.0.180):
The file itself is 307 KB on disk, but when you download it through unpkg it is compressed, so it downloads about 4x as fast. Once the browser downloads the compressed version, it will decompress it to make it usable JavaScript.
The standard compression algorithm/encoding used is gzip
Diagrams from https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
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.
In my usecase i need to read large zip files in an angular electron app.
So far I use jszip but there is a limit of the zip file size of 1GB (32bit version) and 2 GB (64 bit).
I can not unzip the file when the zip files are larger.
Are there other possibilities? Would webassembly be a possibility or do I have the same limitations at this point?
You'll need to process the zip file in chunks, instead of reading it all into memory.
One library that claims to do this is https://www.npmjs.com/package/node-stream-zip
I have one big javascript file and I want use babel on it. But file have around 100k lines (~2.8 MB) and I got message about limit to 500kb.
I'm using babel-cli with preset 'env' on Windows (installed on machine, not web version)
Is there way to compile such big file with babel?
I am getting my app ready for production. The thing is that ng build --prod --aot creates many files. inline.js, main.js are in MB. Also there are .gz files with smaller size. I am working with an Apache server.
Do I need to upload the whole dist folder?
How can I use .gz instead of .js?
In my dist/index.html there are generated links for the .js files. Should I remove it?
If you are using it in a webpage, gzip is a configuration method in your web server. The file is gzipped by the server, sent to the browser. No manual action is needed. For Apache: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html.
If you are delivering the code to developers, you could use the gzip command.
I am developing a chrome extension, and I wonder that is there any way to compress a developing directory to .crx file that can be installed in chrome by program like using Python or NodeJS?
I've found this link saying that you can change the .crx to .zip, and after decompressing you can see the extension's code.
So, I tried it in reverse. I compressed my developing chrome extension directory to .zip file-format manually and change .zip to .crx, then I tried to install it in chrome, but it didn't work. Obviously, using program to compress a directory to .zip the rename it to .crx doesn't work.
How to generate a chrome extension from directory automatically by a program? I am using python and NodeJS.
Chrome has support for packaging an extension from commandline, use this:
chrome.exe --pack-extension=C:\myext --pack-extension-key=C:\myext.pem
for more info: chrome