I am looking into using uglifyjs to minimize my webpack bundle
currently my bundle is: 1.13 MB
I have installed webpack bundle analyzer and have booted it up and seen the stats it has thrown up.
For example my basket/index.js is: stat size: 5.16kb, parsed size: 5.38kb,and gzipped size is: 1017b.
I have a couple of questions.
1. can I get this file down to the gzipped size?
2. can I just run uglifyjs --compress filename to achieve this?
3. why is the parsed size bigger than the stat size?
4. will this make an iota of difference to the bundle size/performance?
Related
For explaining this issue. I have created a sample project.
I am using purescript. I am doing a dynamic import and webpack is generating 2 bundles.
If I comment the dynamic import and use a static import, I am getting a bundle size around 12 KB.
But, with dynamic split, webpack is generating 2 bundle, one is of 200 Bytes and other one 29 KB.
I am not sure why 20 KB is getting added in the first bundle after split.
Can someone help me in figuring out, What is increasing the bundle size ?
I'm using a large library (around 1 MB) along with webpack for building. The library is just used normally - it's in package.json's dependencies, and at some point in my code I import it with an import from <lib_name> (this is in Typescript).
So right now, when I run a webpack build, the end result bundle.js contains all (or most? not sure how much webpack trims, actually) of the library's code. So even my barebones application that's only a couple lines of code and an import has that big 1MB build size.
What I would like to do is have the library not be thrown into the final build, and instead basically have in my HTML file something like this:
<script src="https://some.cdn.here/thelibrary-v0.0.0.min.js"></script>
<script src="bundle.js"></script>
In other words, the files in the build would be something like:
BEFORE:
dist/
bundle.js -- 1005 KB
AFTER:
dist/
thelibrary-v0.0.0.min.js -- 1000 KB
bundle.js -- 5 KB
Where bundle.js becomes a very small file with just my code, and it simply expects the library to be loaded beforehand. To be clear - bundle.js would still be using things from the library and would need it to run. I'm not sure if this is actually possible or not, because I don't have a good understanding of how webpack actually handles imports and stuff (especially in conjunction with uglify/minification). Is it possible to do something like this, and if so, how?
It can be done with externals.
module.exports = {
//...
externals: {
jquery: 'jQuery'// thelibrary in your case
}
};
Does Create React App provides gzip compression out of the box?
Since in console output it shows below , is it enough to serve them in production , is any particular configuration required ? Please confirm if anyone is aware
File sizes after gzip:
88.96 KB build\static\js\2.67a35d8a.chunk.js
45.81 KB build\static\js\3.06562e80.chunk.js
2.17 KB build\static\js\4.2dca02a2.chunk.js
1.71 KB build\static\js\main.01ef12c5.chunk.js
No it does not. And as a matter of fact, It does not allow us to change the default configuration of the Module Bundler which it uses ( Webpack). If you want to serve gzipped compressed bundle to make your apps load faster on client side, then you can find my answer posted at https://stackoverflow.com/a/67716096/2631276
I don't believe so but it looks like you can configure this on your own in your package.json file in your postbuild script.
This post might be helpful for you.
I've got Webpack working with style-loader and sass-loader, but can't figure one thing out:
I have two separate "stylesheet" bundles (our normal app, and a custom-skin version for a client). If I require them in separately, it'll still get output as 1 file (bundle.css). I also tried setting the sass source files as entry points, but that gave me this error:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /Users/slangbroek/Projects/app-name/app/src/styles/mobile/mobile in /Users/slangbroek/Projects/app-name/app/src
for both stylesheet-entrypoints. Does anybody have any idea how to accomplish this with Webpack?
You could use two .js entrypoints, one for the normal app and one for the custom-skinned version. If the only difference in these were the stylesheets, you may want to have 3 entrypoints, one for the app .js that both projects consume, and an entrypoint for each .scss file. All those entrypoint files would do is require the stylesheets.
Its pretty bizarre, but I believe that'd be the only pure webpack solution. Of course, you could consider using webpack in conjunction with gulp/grunt/etc, and use the task runner to bundle with webpack and compile your scss files as well.
I was testing combining css and js files and that seem to be easy using this command line:
for css files:
sudo cat *.css > combined.css
for js files:
sudo cat *.js > combined.js
The weird part is that the compression result don't seem to be as I thought. I compared the results through this command:
wc combined.css combined.min.css
And got this result:
727325 combined.css
716052 combined.min.css
now I'm wondering is that all I can do? does that reflect a real result? I mean I see some tests around the net and it shows around 60% difference.
any idea what's going on??
Update:
This is the command used to compress the files:
java -jar /usr/share/yui-compressor/yui-compressor.jar combined.css -o combined.min.css