├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── benchmarks ├── create-react-app.js ├── immutable.js ├── index.html ├── jquery.js ├── lodash.js ├── pouchdb.js └── three.js ├── bin ├── build-benchmark.sh ├── print-bundle-sizes.sh └── publish-benchmark.sh ├── lib ├── bin.js └── index.js ├── package.json └── test ├── cases ├── array-literal-iife-in-function-scope │ ├── input.js │ └── output.js ├── array-literal-iife-in-global-scope │ ├── input.js │ └── output.js ├── array-literal-in-function-params │ ├── input.js │ └── output.js ├── array-literal-in-function-scope │ ├── input.js │ └── output.js ├── array-literal-in-global-scope │ ├── input.js │ └── output.js ├── arrow-function-no-error │ ├── input.js │ └── output.js ├── browserify-basic-with-bundle-collapser │ ├── input.js │ └── output.js ├── browserify-basic │ ├── input.js │ └── output.js ├── browserify-object-literal-in-global-scope │ ├── input.js │ └── output.js ├── browserify-style-multi-element │ ├── input.js │ └── output.js ├── browserify-style-non-iife │ ├── input.js │ └── output.js ├── browserify-style-one-element │ ├── input.js │ └── output.js ├── browserify-style-with-non-numeric-propname │ ├── input.js │ └── output.js ├── crockford-iife-no-double-wrap │ ├── input.js │ └── output.js ├── ember-style │ ├── input.js │ └── output.js ├── function-passed-to-function-middle-arg │ ├── input.js │ └── output.js ├── function-passed-to-function-no-double-wrap-2 │ ├── input.js │ └── output.js ├── function-passed-to-function-no-double-wrap-3 │ ├── input.js │ └── output.js ├── function-passed-to-function-no-double-wrap │ ├── input.js │ └── output.js ├── function-passed-to-function │ ├── input.js │ └── output.js ├── iife-no-double-wrap │ ├── input.js │ └── output.js ├── jquery-style │ ├── input.js │ └── output.js ├── uglify-style │ ├── input.js │ └── output.js ├── umd-basic │ ├── input.js │ └── output.js ├── webpack-style-multi-element │ ├── input.js │ └── output.js └── webpack-style-one-element │ ├── input.js │ └── output.js └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | /benchmarks/**/*.optimized.js 4 | /benchmarks/**/*.min.js 5 | /coverage 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | sudo: false 5 | script: npm run $COMMAND 6 | env: 7 | matrix: 8 | - COMMAND=test 9 | - COMMAND=coverage 10 | branches: 11 | only: 12 | - master 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | optimize-js [![Build Status](https://travis-ci.org/nolanlawson/optimize-js.svg?branch=master)](https://travis-ci.org/nolanlawson/optimize-js) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) 2 | ======== 3 | 4 | Optimize a JavaScript file for faster initial execution and parsing, by wrapping all immediately-invoked functions or likely-to-be-invoked functions in parentheses. 5 | 6 | _**⚠️ Maintenance note ⚠️** This project is unmaintained. I consider it an interesting experiment, but I have no intention to keep updating the benchmark results with every new browser release, or to add new features. I invite folks to keep using it, but to be aware that they should heavily benchmark their own websites to ensure it's actually a significant performance improvement in their target browsers._ 7 | 8 | _**Update** The V8 team wrote [a blog post](https://v8.dev/blog/preparser#pife) about why you probably shouldn't use optimize-js anymore._ 9 | 10 | Install 11 | --- 12 | 13 | npm install -g optimize-js 14 | 15 | Usage 16 | --- 17 | 18 | optimize-js input.js > output.js 19 | 20 | Example input: 21 | 22 | ```js 23 | !function (){}() 24 | function runIt(fun){ fun() } 25 | runIt(function (){}) 26 | ``` 27 | 28 | Example output: 29 | 30 | ```js 31 | !(function (){})() 32 | function runIt(fun){ fun() } 33 | runIt((function (){})) 34 | ``` 35 | 36 | Benchmark overview 37 | ---- 38 | 39 | | Browser | Typical speed boost/regression using optimize-js | 40 | | ---- | ----- | 41 | | Chrome 55 | 20.63% | 42 | | Edge 14 | 13.52% | 43 | | Firefox 50 | 8.26% | 44 | | Safari 10 | -1.04% | 45 | 46 | These numbers are based on a benchmark of common JS libraries. For benchmark details, see [benchmarks](#benchmarks). 47 | 48 | To test on your own JavaScript bundle, check out [test-optimize-js](https://nolanlawson.github.io/test-optimize-js/). 49 | 50 | CLI 51 | ---- 52 | 53 | ``` 54 | Usage: optimize-js [ options ] 55 | 56 | Options: 57 | --source-map include source map [boolean] 58 | -h, --help Show help [boolean] 59 | 60 | Examples: 61 | optimize-js input.js > output.js optimize input.js 62 | optimize-js < input.js > output.js read from stdin, write to stdout 63 | ``` 64 | 65 | JavaScript API 66 | ---- 67 | 68 | ```js 69 | var optimizeJs = require('optimize-js'); 70 | var input = "!function() {console.log('wrap me!')}"; 71 | var output = optimizeJs(input); // "!(function() {console.log('wrap me!')})()" 72 | ``` 73 | 74 | You can also pass in arguments: 75 | ```js 76 | var optimizeJs = require('optimize-js'); 77 | var input = "!function() {console.log('wrap me!')}"; 78 | var output = optimizeJs(input, { 79 | sourceMap: true 80 | }); // now the output has source maps 81 | ``` 82 | 83 | Why? 84 | ---- 85 | 86 | Modern JavaScript engines like V8, Chakra, and SpiderMonkey have a heuristic where they pre-parse most 87 | functions before doing a full parse. 88 | The pre-parse step merely checks for syntax errors while avoiding the cost of a full parse. 89 | 90 | This heuristic is based on the assumption that, on the average web page, most JavaScript functions are never 91 | executed or are lazily executed. 92 | So a pre-parse can prevent a slower startup time by only checking for what the browser absolutely needs 93 | to know about the function (i.e. whether it's syntactically well-formed or not). 94 | 95 | Unfortunately this assumption breaks down in the case of immediately-invoked function expressions (IIFEs), such as these: 96 | 97 | ```js 98 | (function () { console.log('executed!') })(); 99 | (function () { console.log('executed Crockford-style!') }()); 100 | !function () { console.log('executed UglifyJS-style!') }(); 101 | ``` 102 | 103 | The good news is that JS engines have a _further_ optimization, 104 | where they try to detect such IIFEs and skip the pre-parse step. Hooray! 105 | 106 | The bad news, though, is that these heuristics don't always work, 107 | because they're based on a greedy method of checking for a `'('` token immediately to the left of the function. (The parser 108 | avoids anything more intricate because it would amount to parsing the whole thing, negating the benefit of the pre-parse). 109 | In cases without the paren (which include 110 | common module formats like UMD/Browserify/Webpack/etc.), the browser will actually parse the function _twice_, first as a pre-parse and second 111 | as a full parse. This means that the JavaScript code runs much more slowly overall, because more time is spent parsing than needs to be. See ["The cost of small modules"](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/) for an idea of how bad this can get. 112 | 113 | Luckily, because the `'('` optimization for IIFEs is so well-established, we can exploit this during our build process by 114 | parsing the entire JavaScript file in advance (a luxury the browser can't afford) and inserting parentheses in the cases where we _know_ 115 | the function will be immediately executed (or where we have a good hunch). That's what `optimize-js` does. 116 | 117 | More details on the IIFE optimization can be found in [this discussion](https://github.com/mishoo/UglifyJS2/issues/886). Some of my thoughts on the virtues of compile-time optimizations can be found in [this post](https://gist.github.com/nolanlawson/e73c61da78ffb39e4fc034a62ce8b263). 118 | 119 | FAQs 120 | ---- 121 | 122 | ### How does it work? 123 | 124 | The current implementation is to parse to a syntax tree and check for functions that: 125 | 126 | 1. Are immediately-invoked via any kind of call statement (`function(){}()`, `!function(){}()`, etc.) 127 | 2. Are passed in directly as arguments to another function 128 | 129 | The first method is an easy win – those functions are immediately executed. The second method is more of a heuristic, but tends 130 | to be a safe bet given common patterns like Node-style errbacks, Promise chains, and UMD/Browserify/Webpack module declarations. 131 | 132 | In all such cases, `optimize-js` wraps the function in parentheses. 133 | 134 | ### But... you're adding bytes! 135 | 136 | Yes, `optimize-js` might add as many as two bytes (horror!) per function, which amounts to practically nil once you 137 | take gzip into account. To prove it, here are the gzipped sizes for the libraries I use in the benchmark: 138 | 139 | | Script | Size (bytes) | Difference (bytes) | 140 | | ---- | --- | --- | 141 | | benchmarks/create-react-app.min.js | 160387 || 142 | | benchmarks/create-react-app.min.optimized.js | 160824 |+ 437 | 143 | | benchmarks/immutable.min.js | 56738 || 144 | | benchmarks/immutable.min.optimized.js | 56933 |+ 195 | 145 | | benchmarks/jquery.min.js | 86808 || 146 | | benchmarks/jquery.min.optimized.js | 87109 |+ 301 | 147 | | benchmarks/lodash.min.js | 71381 || 148 | | benchmarks/lodash.min.optimized.js | 71644 |+ 263 | 149 | | benchmarks/pouchdb.min.js | 140332 || 150 | | benchmarks/pouchdb.min.optimized.js | 141231 |+ 899 | 151 | | benchmarks/three.min.js | 486996 || 152 | | benchmarks/three.min.optimized.js | 487279 |+ 283 | 153 | 154 | ### Is `optimize-js` intended for library authors? 155 | 156 | Sure! If you are already shipping a bundled, minified version of your library, then there's no reason not to apply `optimize-js` (assuming you benchmark your code to ensure it does indeed help!). However, note that `optimize-js` should run _after_ Uglify, since Uglify strips extra parentheses and also [negates IIFEs by default](https://github.com/mishoo/UglifyJS2/issues/640). This also means that if your users apply Uglification to your bundle, then the optimization will be undone. 157 | 158 | Also note that because `optimize-js` optimizes for some patterns that are based on heuristics rather than _known_ eagerly-invoked 159 | functions, it may actually hurt your performance in some cases. (See benchmarks below for examples.) Be sure to check that `optimize-js` is a help rather than a hindrance for your particular codebase, using something like: 160 | 161 | ```html 162 | 165 | 166 | 170 | ``` 171 | 172 | Note that the script boundaries are actually recommended, in order to truly measure the full parse/compile time. 173 | If you'd like to avoid measuring the network overhead, you can see how we do it in [our benchmarks](https://github.com/nolanlawson/optimize-js/blob/bbac7678656c85a1e4b98cf22ea4d5342965b2fd/benchmarks/index.html#L111-L126). 174 | 175 | You may also want to check out [marky](http://github.com/nolanlawson/marky), 176 | which allows you to easily set mark/measure points that you can visually inspect in the Dev Tools timeline to ensure that the full 177 | compile time is being measured. 178 | 179 | Also, be sure to test in multiple browsers! If you need an Edge VM, check out [edge.ms](http://edge.ms). 180 | 181 | ### Shouldn't this be Uglify's job? 182 | 183 | Possibly! This is a free and open-source library, so I encourage anybody to borrow the code or the good ideas. :) 184 | 185 | ### Why not paren-wrap every single function? 186 | 187 | As described above, the pre-parsing optimization in browsers is a very good idea for the vast majority of the web, where most functions 188 | aren't immediately executed. However, since `optimize-js` knows when your functions are immediately executed (or can make reasonable 189 | guesses), it can be more judicious in applying the paren hack. 190 | 191 | ### Does this really work for every JavaScript engine? 192 | 193 | Based on my tests, this optimization seems to work best for V8 (Chrome), followed by Chakra (Edge), followed by SpiderMonkey (Firefox). For JavaScriptCore (Safari) it seems to be basically a wash, and may actually be a slight regression overall depending on your codebase. (Again, this is why it's important to actually measure on your own codebase, on the browsers you actually target!) 194 | 195 | In the case of Chakra, [Uglify-style IIFEs are actually already optimized](https://github.com/mishoo/UglifyJS2/issues/640#issuecomment-247792319), but using `optimize-js` doesn't hurt because a 196 | function preceded by `'('` still goes into the fast path. 197 | 198 | Benchmarks 199 | ---- 200 | 201 | These tests were run using a handful of popular libraries, wrapped in `performance.now()` measurements. Each test reported the median of 251 runs. `optimize-js` commit [da51013](https://github.com/nolanlawson/optimize-js/commit/da51013) was tested. Minification was applied using `uglifyjs -mc`, Uglify 2.7.0. 202 | 203 | You can also try [a live version of the benchmark](https://nolanlawson.github.io/optimize-js/). 204 | 205 | ### Chrome 55, Windows 10 RS1, Surfacebook i5 206 | 207 | | Script | Original | Optimized | Improvement | Minified | Min+Optimized | Improvement | 208 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | 209 | | Create React App | 55.39ms | 51.71ms | **6.64%** | 26.12ms | 21.09ms | **19.26%** | 210 | | ImmutableJS | 11.61ms | 7.95ms | **31.50%** | 8.50ms | 5.99ms | **29.55%** | 211 | | jQuery | 22.51ms | 16.62ms | **26.18%** | 19.35ms | 16.10ms | **16.80%** | 212 | | Lodash | 20.88ms | 19.30ms | **7.57%** | 20.47ms | 19.86ms | **3.00%** | 213 | | PouchDB | 43.75ms | 20.36ms | **53.45%** | 36.40ms | 18.78ms | **48.43%** | 214 | | ThreeJS | 71.04ms | 72.98ms | **-2.73%** | 54.99ms | 39.59ms | **28.00%** | 215 | Overall improvement: **20.63%** 216 | 217 | ### Edge 14, Windows 10 RS1, SurfaceBook i5 218 | 219 | | Script | Original | Optimized | Improvement | Minified | Min+Optimized | Improvement | 220 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | 221 | | Create React App | 32.46ms | 24.85ms | **23.44%** | 26.49ms | 20.39ms | **23.03%** | 222 | | ImmutableJS | 8.94ms | 6.19ms | **30.74%** | 7.79ms | 5.41ms | **30.55%** | 223 | | jQuery | 22.56ms | 14.45ms | **35.94%** | 16.62ms | 12.99ms | **21.81%** | 224 | | Lodash | 22.16ms | 21.48ms | **3.05%** | 15.77ms | 15.46ms | **1.96%** | 225 | | PouchDB | 24.07ms | 21.22ms | **11.84%** | 39.76ms | 52.86ms | **-32.98%** | 226 | | ThreeJS | 43.77ms | 39.99ms | **8.65%** | 54.00ms | 36.57ms | **32.28%** | 227 | Overall improvement: **13.52%** 228 | 229 | ### Firefox 50, Windows 10 RS1, Surfacebook i5 230 | 231 | | Script | Original | Optimized | Improvement | Minified | Min+Optimized | Improvement | 232 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | 233 | | Create React App | 33.56ms | 28.02ms | **16.50%** | 24.71ms | 22.05ms | **10.76%** | 234 | | ImmutableJS | 6.52ms | 5.75ms | **11.80%** | 4.96ms | 4.58ms | **7.47%** | 235 | | jQuery | 15.77ms | 13.97ms | **11.41%** | 12.90ms | 12.15ms | **5.85%** | 236 | | Lodash | 17.08ms | 16.63ms | **2.64%** | 13.11ms | 13.22ms | **-0.80%** | 237 | | PouchDB | 19.23ms | 16.77ms | **12.82%** | 13.77ms | 12.89ms | **6.42%** | 238 | | ThreeJS | 38.33ms | 37.36ms | **2.53%** | 33.01ms | 30.32ms | **8.16%** | 239 | Overall improvement: **8.26%** 240 | 241 | ### Safari 10, macOS Sierra, 2013 MacBook Pro i5 242 | 243 | | Script | Original | Optimized | Improvement | Minified | Min+Optimized | Improvement | 244 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | 245 | | Create React App | 31.60ms | 31.60ms | **0.00%** | 23.10ms | 23.50ms | **-1.73%** | 246 | | ImmutableJS | 5.70ms | 5.60ms | **1.75%** | 4.50ms | 4.50ms | **0.00%** | 247 | | jQuery | 12.40ms | 12.60ms | **-1.61%** | 10.80ms | 10.90ms | **-0.93%** | 248 | | Lodash | 14.70ms | 14.50ms | **1.36%** | 11.10ms | 11.30ms | **-1.80%** | 249 | | PouchDB | 14.00ms | 14.20ms | **-1.43%** | 11.70ms | 12.10ms | **-3.42%** | 250 | | ThreeJS | 35.60ms | 36.30ms | **-1.97%** | 27.50ms | 27.70ms | **-0.73%** | 251 | Overall improvement: **-1.04%** 252 | 253 | Note that these results may vary based on your machine, how taxed your CPU is, gremlins, etc. I ran the full suite a few times on all browsers and found these numbers to be roughly representative. In our test suite, we use a median of 151 runs to reduce variability. 254 | 255 | Plugins 256 | --- 257 | 258 | * [Grunt plugin for optimize-js](https://github.com/sergejmueller/grunt-optimize-js) 259 | * [Gulp plugin for optimize-js](https://github.com/prateekbh/gulp-optimize-js) 260 | * [Webpack plugin for optimize-js](https://github.com/vigneshshanmugam/optimize-js-plugin) 261 | 262 | See also 263 | --- 264 | 265 | * [broccoli-ember-preparse](https://www.npmjs.com/package/broccoli-ember-preparse) 266 | * [to-fast-properties](https://github.com/sindresorhus/to-fast-properties) 267 | * [V8LazyParsePlugin](https://github.com/TheLarkInn/V8LazyParseWebpackPlugin) 268 | 269 | Thanks 270 | ---- 271 | 272 | Thanks to [@krisselden](https://github.com/krisselden), [@bmaurer](https://github.com/bmaurer), and [@pleath](https://github.com/pleath) for explaining these concepts in the various GitHub issues. Thanks also to [astexplorer](https://github.com/fkling/astexplorer), [acorn](https://github.com/ternjs/acorn), and [magic-string](https://www.npmjs.com/package/magic-string) for making the implementation so easy. 273 | 274 | Thanks to [Sasha Aickin](https://github.com/aickin) for generous contributions to improving this library (especially in v1.0.3) 275 | and prodding me to improve the accuracy of the benchmarks. 276 | 277 | Contributing 278 | ----- 279 | 280 | Build and run tests: 281 | 282 | ```bash 283 | npm install 284 | npm test 285 | ``` 286 | 287 | Run the benchmarks: 288 | 289 | ```bash 290 | npm run benchmark # then open localhost:9090 in a browser 291 | ``` 292 | 293 | Test code coverage: 294 | 295 | ```bash 296 | npm run coverage 297 | ``` 298 | 299 | Changelog 300 | ---- 301 | 302 | - v1.0.3 303 | - Much more accurate benchmark ([#37](https://github.com/nolanlawson/optimize-js/issues/37)) 304 | - Browserify-specific fixes ([#29](https://github.com/nolanlawson/optimize-js/issues/29), [#36](https://github.com/nolanlawson/optimize-js/issues/36), [#39](https://github.com/nolanlawson/optimize-js/issues/39)) 305 | - Webpack-specific fixes ([#7](https://github.com/nolanlawson/optimize-js/issues/7), [#34](https://github.com/nolanlawson/optimize-js/issues/34)) 306 | - v1.0.2 307 | - Use estree-walker to properly parse ES6 ([#31](https://github.com/nolanlawson/optimize-js/issues/31)) 308 | - v1.0.1: 309 | - Don't call process.exit(0) on success ([#11](https://github.com/nolanlawson/optimize-js/issues/11)) 310 | - v1.0.0 311 | - Initial release 312 | -------------------------------------------------------------------------------- /benchmarks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | optimize-js benchmark 5 | 6 | 19 | 20 | 21 | Fork me on GitHub 22 |

optimize-js benchmark v1.0.3

23 |

All tests are median of 251.

24 |
25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 | 37 | 38 |
39 |
40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | 50 |
51 |
52 | 53 | 54 | 55 | 56 |
57 |
58 | 59 | 60 | 61 | 62 |
63 |
64 | 

 65 | 

 66 | 
 70 | 
218 | 
219 | 
220 | 


--------------------------------------------------------------------------------
/bin/build-benchmark.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | for js in `echo ./benchmarks/*js | tr ' ' '\n' | grep -v optimized | grep -v min`; do
 4 |   min=`echo $js | sed 's/.js/.min.js/'`
 5 |   opt=`echo $js | sed 's/.js/.optimized.js/'`
 6 |   minopt=`echo $js | sed 's/.js/.min.optimized.js/'`
 7 |   ./node_modules/.bin/uglifyjs -mc < $js > $min
 8 |   node lib/bin.js < $js > $opt
 9 |   node lib/bin.js < $min > $minopt
10 | done
11 | 


--------------------------------------------------------------------------------
/bin/print-bundle-sizes.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | # print the bundle sizes and differences as reported in the README
 4 | 
 5 | echo "| Script | Size (bytes) | Difference (bytes) | "
 6 | echo "| ---- | --- | --- |"
 7 | 
 8 | for js in benchmarks/*.min.js; do
 9 |   optimized=`echo $js | sed 's/.min.js/.min.optimized.js/'`
10 |   jsSize=`wc -c < $js`
11 |   optimizedSize=`wc -c < $optimized`
12 |   difference=`expr $optimizedSize - $jsSize`
13 |   echo '|' $js '|' $jsSize '||'
14 |   echo '|' $optimized '|' $optimizedSize '|+' $difference '|'
15 | done
16 | 


--------------------------------------------------------------------------------
/bin/publish-benchmark.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | BRANCH=temp_$RANDOM
 4 | git checkout -b $BRANCH
 5 | npm run build-benchmark
 6 | cp -r benchmarks/* .
 7 | git add -f *js *html
 8 | git commit -a -m 'build'
 9 | git push --force origin $BRANCH:gh-pages
10 | git checkout master
11 | git branch -D $BRANCH
12 | 


--------------------------------------------------------------------------------
/lib/bin.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | 'use strict'
 4 | 
 5 | var concat = require('concat-stream')
 6 | var optimizeJs = require('./')
 7 | var fs = require('fs')
 8 | var yargs = require('yargs')
 9 | var argv = yargs
10 |   .usage('Usage: $0 [ options ]')
11 |   .example('$0 input.js > output.js', 'optimize input.js')
12 |   .example('$0 < input.js > output.js', 'read from stdin, write to stdout')
13 |   .boolean('source-map')
14 |   .describe('source-map', 'include source map')
15 |   .help('h')
16 |   .alias('h', 'help')
17 |   .argv
18 | 
19 | var inStream = argv._[0] ? fs.createReadStream(argv._[0], 'utf8') : process.stdin
20 | inStream.pipe(concat(function (buf) {
21 |   var str = buf.toString('utf8')
22 |   var opts = {
23 |     sourceMap: argv['source-map']
24 |   }
25 |   try {
26 |     var out = optimizeJs(str, opts)
27 |     console.log(out)
28 |   } catch (err) {
29 |     console.error(err)
30 |     process.exit(1)
31 |   }
32 | })).on('error', function (err) {
33 |   console.error(err)
34 |   process.exit(1)
35 | })
36 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | var acorn = require('acorn')
  4 | var MagicString = require('magic-string')
  5 | var walk = require('estree-walker').walk
  6 | 
  7 | function optimizeJs (jsString, opts) {
  8 |   opts = opts || {}
  9 |   var ast = acorn.parse(jsString)
 10 |   var magicString = new MagicString(jsString)
 11 | 
 12 |   walk(ast, {
 13 |     enter: function (node, parent) {
 14 |       // estree-walker does not automatically add a parent node pointer to nodes,
 15 |       // which we need for some of our context checks below.
 16 |       // normally I would just write "node.parentNode = parent" here, but that makes
 17 |       // estree-walker think that parentNode is a child node of the node, which leads to
 18 |       // infinite loops as it walks a circular tree. if we make parent a function, though,
 19 |       // estree-walker does not follow the link.
 20 |       node.parent = function () {
 21 |         return parent
 22 |       }
 23 |        // assuming this node is an argument to a function or an element in an array,
 24 |        // return true if it itself is already padded with parentheses
 25 |       function isPaddedArgument (node) {
 26 |         var parentArray = node.parent().arguments ? node.parent().arguments : node.parent().elements
 27 |         var idx = parentArray.indexOf(node)
 28 |         if (idx === 0) { // first arg
 29 |           if (prePreChar === '(' && preChar === '(' && postChar === ')') { // already padded
 30 |             return true
 31 |           }
 32 |         } else if (idx === parentArray.length - 1) { // last arg
 33 |           if (preChar === '(' && postChar === ')' && postPostChar === ')') { // already padded
 34 |             return true
 35 |           }
 36 |         } else { // middle arg
 37 |           if (preChar === '(' && postChar === ')') { // already padded
 38 |             return true
 39 |           }
 40 |         }
 41 |         return false
 42 |       }
 43 | 
 44 |       function isNumeric (str) {
 45 |         return /^[0-9]+$/.test(str)
 46 |       }
 47 | 
 48 |       function isCallExpression (node) {
 49 |         return node && node.type === 'CallExpression'
 50 |       }
 51 | 
 52 |       function isArrayExpression (node) {
 53 |         return node && node.type === 'ArrayExpression'
 54 |       }
 55 | 
 56 |       function isElementOfArray (node) {
 57 |         return isArrayExpression(node.parent()) &&
 58 |           node.parent().elements.indexOf(node) !== -1
 59 |       }
 60 | 
 61 |       // returns true iff node is an argument to a function call expression.
 62 |       function isArgumentToFunctionCall (node) {
 63 |         return isCallExpression(node.parent()) &&
 64 |           node.parent().arguments.length &&
 65 |           node.parent().arguments.indexOf(node) !== -1
 66 |       }
 67 | 
 68 |       function isValueOfObjectLiteralWithNumericName (node) {
 69 |         return node &&
 70 |           node.parent() &&
 71 |           node.parent().type === 'Property' &&
 72 |           node.parent().key &&
 73 |           node.parent().key.type === 'Literal' &&
 74 |           node.parent().key.raw &&
 75 |           isNumeric(node.parent().key.raw) &&
 76 |           node.parent().value === node &&
 77 |           node.parent().parent() &&
 78 |           node.parent().parent().type === 'ObjectExpression'
 79 |       }
 80 | 
 81 |       // returns true iff node is an IIFE.
 82 |       function isIIFE (node) {
 83 |         return node &&
 84 |           node.type === 'FunctionExpression' &&
 85 |           isCallExpression(node.parent()) &&
 86 |           node.parent().callee === node
 87 |       }
 88 | 
 89 |       // returns true iff this is an IIFE call expression
 90 |       function isIIFECall (node) {
 91 |         return node &&
 92 |           isCallExpression(node) &&
 93 |           node.callee &&
 94 |           node.callee.type === 'FunctionExpression'
 95 |       }
 96 | 
 97 |       // tries to divine if this function is a webpack module wrapper.
 98 |       // returns true iff node is an element of an array literal which is in turn
 99 |       // an argument to a function call expression, and that function call
100 |       // expression is an IIFE.
101 |       function isProbablyWebpackModule (node) {
102 |         return isElementOfArray(node) &&
103 |           isArgumentToFunctionCall(node.parent()) &&
104 |           isIIFECall(node.parent().parent())
105 |       }
106 | 
107 |       function isProbablyBrowserifyModule (node) {
108 |         return isElementOfArray(node) &&
109 |           isValueOfObjectLiteralWithNumericName(node.parent()) &&
110 |           isArgumentToFunctionCall(node.parent().parent().parent()) &&
111 |           isIIFECall(node.parent().parent().parent().parent())
112 |       }
113 | 
114 |       if (node.type === 'FunctionExpression') {
115 |         var prePreChar = jsString.charAt(node.start - 2)
116 |         var preChar = jsString.charAt(node.start - 1)
117 |         var postChar = jsString.charAt(node.end)
118 |         var postPostChar = jsString.charAt(node.end + 1)
119 | 
120 |         if (isArgumentToFunctionCall(node) ||
121 |           isProbablyWebpackModule(node) ||
122 |           isProbablyBrowserifyModule(node)) {
123 |           // function passed in to another function, either as an argument, or as an element
124 |           // of an array argument. these are almost _always_ executed, e.g. webpack bundles,
125 |           // UMD bundles, Browserify bundles, Node-style errbacks, Promise then()s and catch()s, etc.
126 |           if (!isPaddedArgument(node)) { // don't double-pad
127 |             magicString = magicString.insertLeft(node.start, '(')
128 |               .insertRight(node.end, ')')
129 |           }
130 |         } else if (isIIFE(node)) {
131 |           // this function is getting immediately invoked, e.g. function(){}()
132 |           if (preChar !== '(') {
133 |             magicString.insertLeft(node.start, '(')
134 |               .insertRight(node.end, ')')
135 |           }
136 |         }
137 |       }
138 |     }
139 |   })
140 | 
141 |   var out = magicString.toString()
142 |   if (opts.sourceMap) {
143 |     out += '\n//# sourceMappingURL=' + magicString.generateMap().toUrl()
144 |   }
145 |   return out
146 | }
147 | 
148 | module.exports = optimizeJs
149 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "optimize-js",
 3 |   "version": "1.0.3",
 4 |   "description": "Optimize initial JavaScript execution/parsing by wrapping eager functions",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "test": "standard && mocha --timeout 60000 test/test.js",
 8 |     "benchmark": "npm run build-benchmark && hs -p 9090 benchmarks",
 9 |     "build-benchmark": "sh bin/build-benchmark.sh",
10 |     "publish-benchmark": "sh bin/publish-benchmark.sh",
11 |     "coverage": "istanbul cover ./node_modules/mocha/bin/_mocha test/test.js && istanbul check-coverage --lines 100 --function 100 --statements 100 --branches 100"
12 |   },
13 |   "bin": {
14 |     "optimize-js": "lib/bin.js"
15 |   },
16 |   "keywords": [
17 |     "optimize",
18 |     "optimise",
19 |     "js"
20 |   ],
21 |   "author": "Nolan Lawson ",
22 |   "license": "Apache-2.0",
23 |   "dependencies": {
24 |     "acorn": "^3.3.0",
25 |     "concat-stream": "^1.5.1",
26 |     "estree-walker": "^0.3.0",
27 |     "magic-string": "^0.16.0",
28 |     "yargs": "^4.8.1"
29 |   },
30 |   "devDependencies": {
31 |     "assert": "^1.4.1",
32 |     "denodeify": "^1.2.1",
33 |     "http-server": "^0.9.0",
34 |     "istanbul": "^0.4.5",
35 |     "mocha": "^3.0.2",
36 |     "standard": "^7.1.2",
37 |     "uglify-js": "^2.7.0"
38 |   },
39 |   "files": [
40 |     "lib"
41 |   ],
42 |   "standard": {
43 |     "ignore": [
44 |       "test/cases/**",
45 |       "benchmarks/**"
46 |     ]
47 |   },
48 |   "repository": {
49 |     "type": "git",
50 |     "url": "git+https://github.com/nolanlawson/optimize-js.git"
51 |   },
52 |   "bugs": {
53 |     "url": "https://github.com/nolanlawson/optimize-js/issues"
54 |   },
55 |   "homepage": "https://github.com/nolanlawson/optimize-js#readme"
56 | }
57 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-iife-in-function-scope/input.js:
--------------------------------------------------------------------------------
1 | function b() {
2 |   var a = [
3 |     !function() {return 1;}()
4 |   ];
5 | }
6 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-iife-in-function-scope/output.js:
--------------------------------------------------------------------------------
1 | function b() {
2 |   var a = [
3 |     !(function() {return 1;})()
4 |   ];
5 | }
6 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-iife-in-global-scope/input.js:
--------------------------------------------------------------------------------
1 | var a = [
2 |   !function() {return 1;}()
3 | ]
4 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-iife-in-global-scope/output.js:
--------------------------------------------------------------------------------
1 | var a = [
2 |   !(function() {return 1;})()
3 | ]
4 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-in-function-params/input.js:
--------------------------------------------------------------------------------
1 | foo([
2 |   function(o,r,t){
3 |     console.log("element 0");
4 |   }
5 | ]);
6 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-in-function-params/output.js:
--------------------------------------------------------------------------------
1 | foo([
2 |   function(o,r,t){
3 |     console.log("element 0");
4 |   }
5 | ]);
6 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-in-function-scope/input.js:
--------------------------------------------------------------------------------
1 | function b() {
2 |   var a = [
3 |     function() {return 1;}
4 |   ];
5 | }
6 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-in-function-scope/output.js:
--------------------------------------------------------------------------------
1 | function b() {
2 |   var a = [
3 |     function() {return 1;}
4 |   ];
5 | }
6 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-in-global-scope/input.js:
--------------------------------------------------------------------------------
1 | var a = [
2 |   function() {return 1;}
3 | ]
4 | 


--------------------------------------------------------------------------------
/test/cases/array-literal-in-global-scope/output.js:
--------------------------------------------------------------------------------
1 | var a = [
2 |   function() {return 1;}
3 | ]
4 | 


--------------------------------------------------------------------------------
/test/cases/arrow-function-no-error/input.js:
--------------------------------------------------------------------------------
1 | // examples taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
2 | var func = x => x * x;
3 | var func = (x, y) => { return x + y; };
4 | 
5 | setInterval(() => {
6 |   this.age++;
7 | }, 1000);


--------------------------------------------------------------------------------
/test/cases/arrow-function-no-error/output.js:
--------------------------------------------------------------------------------
1 | // examples taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
2 | var func = x => x * x;
3 | var func = (x, y) => { return x + y; };
4 | 
5 | setInterval(() => {
6 |   this.age++;
7 | }, 1000);


--------------------------------------------------------------------------------
/test/cases/browserify-basic-with-bundle-collapser/input.js:
--------------------------------------------------------------------------------
1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o