![]() ![]() On Mac or Linux, we can define optimize.sh like this: #!/bin/shĮlm make -optimize -output= $js " $js -compress 'pure_funcs=,pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs -mangle -output $min echo "Compiled size: $(wc $js -c) bytes ( $js)" echo "Minified size: $(wc $min -c) bytes ( $min)" echo "Gzipped size: $(gzip $min -c | wc -c) bytes" ![]() ![]() Say we want a bash script that produces elm.js and files. It is hard to remember all those flags for uglifyjs, so it is probably better to write a script that does this. If you do not have npm either, you can get it with nodejs. Note 2: If the uglifyjs command is not available in your terminal, you can run the command npm install uglify-js -global to download it. This is necessary! Otherwise uglifyjs will ignore our pure_funcs flag. First to -compress and second to -mangle. Uglifyjs elm.js -compress 'pure_funcs=,pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs -mangle -output Īfter this you will have an elm.js and a smaller file! Putting those together, we can optimize src/Main.elm with two terminal commands: elm make src/Main.elm -optimize -output=elm.js These flags unlock optimizations that are unreliable in normal JS code, but thanks to the design of Elm, they are totally safe for us! The neat thing about uglifyjs is all its special flags. I use a minifier called uglifyjs, but you can use a different one if you want. Step two is to minify the resulting JavaScript code. This does things like shortening record field names. Step one is to compile with the -optimize flag. It is just two terminal commands! Instructions It does particularly well with keywords like function and return that you just cannot get rid of in the code itself.Įlm makes it pretty easy to get all this set up for your project. Once you have gotten the code as small as possible, you can use a compression algorithm like gzip to shrink it even further. They convert if statements to ternary operators. In the JavaScript world, there are tools called “minifiers” that do a bunch of transformations. So it can cut unused code and shorten record field names like userStatus in the generated code. The Elm compiler can perform optimizations like dead code elimination and record field renaming. For example, if a 122kb asset can become a 9kb asset, it will load faster! We get results like that by using the following techniques: So you can optimize your code all day with Html.Lazy and Html.Keyed, but your application will still feel slow if it loads slowly!Ī great way to improve is to send fewer bits. Especially for folks on mobile phones with slow internet. i.e.The only thing that is slower than touching the DOM is talking to servers. ")) Ī nice benefit of this approach is that it doesn't pollute your project with minified build artifacts, has excellent runtime performance with the minified contents being served from Memory and as the file names remain the same, the links in HTML don't need to be rewritten to reference the minified versions. You can use the ! prefix to exclude files from bundles. To facilitate splitting JS and CSS assets into multiple bundles without needing to create artificial directories for each bundle ![]() html files without requiring adding any additional external tooling or build steps to your existing development workflow. If your project is not based off one of our optimized Webpack-powered Single Page App templates or configured to use our earlier node.js-powered Bundler Web Optimization solution, these built-in minifiers now offers the easiest solution to effortlessly optimize your existing website which is able to work transparently with your existing Razor Views and static. The HtmlCompressor also includes a number of well-documented options which can be customized by configuring the available properties on its concrete type, e.g: var htmlCompressor = (HtmlCompressor)Minifier.Html HTML Compressorįor compressing HTML we're using a C# Port of Google's excellent HTML Compressor which we've further modified to remove the public API's ugly Java-esque idioms and replaced them with C# properties. The CSS Minifier uses Mads Kristensen simple CSS Minifer. Each minifier implements the lightweight ICompressor interface making it trivial to substitute with a custom implementation JS Minifierįor the JavaScript minifier we're using Ext.Net's C# port of Douglas Crockford's venerable JSMin. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |