| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Minify JavaScript</title> |
| <link rel="stylesheet" href="doc.css"> |
| </head> |
| <body> |
| <!--#include virtual="_header.html" --> |
| |
| |
| <div id=content> |
| <h1>Minify JavaScript</h1> |
| <h2>Configuration</h2> |
| <p> |
| The 'Minify JavaScript' filter is enabled by specifying: |
| </p> |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedEnableFilters rewrite_javascript</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed EnableFilters rewrite_javascript;</pre> |
| </dl> |
| <p> |
| in the configuration file. |
| </p> |
| <p class="note"><strong>Note: New feature as of 1.9.32.1</strong></p> |
| <p> |
| <code>rewrite_javascript</code> is equivalent to enabling both |
| <code>rewrite_javascript_inline</code> and |
| <code>rewrite_javascript_external</code>. The former rewrites only |
| inline scripts, and the latter rewrites only external ones. |
| </p> |
| |
| <h3 id="new-minifier">New Minification Parser</h3> |
| <p> |
| We introduced a new minification parser in version 1.8.31.2 that |
| improves on some of the shortcomings of the previous parser |
| (for example, correct tokenizing of regular expressions). As of 1.10.33.0, |
| the new parser is used by default, but you can revert back to the old |
| parser with this configuration flag: |
| </p> |
| <dl> |
| <dt>Apache<dd><pre class="prettyprint" |
| >ModPagespeedUseExperimentalJsMinifier off</pre> |
| <dt>Nginx<dd><pre class="prettyprint" |
| >pagespeed UseExperimentalJsMinifier off;</pre> |
| </dl> |
| <p> |
| Before 1.10.33.0, the old minification parser was |
| used by default. You can enable the new minification parser with: |
| </p> |
| <dl> |
| <dt>Apache<dd><pre class="prettyprint" |
| >ModPagespeedUseExperimentalJsMinifier on</pre> |
| <dt>Nginx<dd><pre class="prettyprint" |
| >pagespeed UseExperimentalJsMinifier on;</pre> |
| </dl> |
| <p> |
| If you have configured any custom javascript libraries |
| for <a href="filter-canonicalize-js">canonicalization</a> you'll have to |
| regenerate your signatures with both <code>--use_experimental_minifier</code> |
| (for the new minifier) and <code>--nouse_experimental_minifier</code> |
| (for the old minifier) flags. |
| </p> |
| <h2>Description</h2> |
| <p> |
| This filter minifies JavaScript code, using an algorithm similar to that in |
| Douglas Crockford's popular |
| <a href="http://www.crockford.com/javascript/jsmin.html">JSMin</a> program. |
| At present, the filter strips all |
| comments and most whitespace. The filter works only on JavaScript found in |
| <code><script></code> blocks (either as the target of the |
| <code>src</code> attribute, or within the body of the block). |
| </p> |
| <p> |
| Minification can drastically reduce the byte count in common JavaScript code. |
| This filter can be used to avoid the extra step of minifying Java code by hand |
| when constructing and maintaining a site. |
| </p> |
| <p> |
| This <a target="_blank" href="https://developers.google.com/speed/docs/best-practices/payload#MinifyJS">practice</a> |
| reduces the payload size. |
| </p> |
| |
| <h2>Operation</h2> |
| <p> |
| The 'Minify JavaScript' filter removes unnecessary bytes on the wire. While it's |
| great to put comments, tabs and whitespace in code to improve readability and |
| maintenance, these are bytes that take up space on the wire and that a browser's |
| JavaScript parser has to parse unnecessarily. |
| </p> |
| <p> |
| For example, if the HTML document looks like this: |
| </p> |
| <pre class="prettyprint"> |
| <html> |
| <head> |
| </head> |
| <body> |
| <script> |
| // This comment will be removed |
| document.write("Howdy"); |
| state = 1 |
| </script> |
| <script src="extScript.js" type="text/javascript"> |
| </script> |
| <script src="extScript1.js"> |
| /* Note that the contents of a script block aren't altered |
| if a src is specified. It is assumed the code will be |
| using the script block contents as data. */ |
| document.write("Internal script; state = " + state); |
| state = 42 |
| </script> |
| </body> |
| </html> |
| </pre> |
| <p> |
| With the following in <code>extScript.js</code>: |
| <pre class="prettyprint"> |
| /* Inject state into document */ |
| document.write("External " + state); |
| state += 1; // Then update it. |
| </pre> |
| <p> |
| Then PageSpeed will rewrite it into: |
| </p> |
| <pre class="prettyprint"> |
| <html> |
| <head> |
| </head> |
| <body> |
| <script>document.write("Howdy");state=1</script> |
| <script src=".../extScript.js.pagespeed.jm.HASH.js"></script> |
| <script src=".../extScript1.js.pagespeed.jm.HASH.js" type="text/javascript"> |
| /* Note that the contents of a script block aren't altered |
| if a src is specified. It is assumed the code will be |
| using the script block contents as data. */ |
| document.write("Internal script; state = " + state); |
| state = 42 |
| </script> |
| </body> |
| </html> |
| </pre> |
| <p> |
| And the rewritten file <code>extScript.js.pagespeed.jm.HASH.js</code> will |
| contain: |
| <pre class="prettyprint"> |
| document.write("External "+state);state+=1; |
| </pre> |
| </p> |
| |
| <h3>Example</h3> |
| <p> |
| You can see the filter in action at <code>www.modpagespeed.com</code> on this |
| <a href="https://www.modpagespeed.com/examples/rewrite_javascript.html?ModPagespeed=on&ModPagespeedFilters=rewrite_javascript">example</a>. |
| </p> |
| |
| <h2>Requirements</h2> |
| <p> |
| Only JavaScript code referenced by <code><script></code> tags is |
| rewritten. Code fragments that occur elsewhere (for example event handler |
| declarations in CSS) are not altered. |
| </p> |
| |
| <h2>Risks</h2> |
| <p> |
| Some JavaScript code depends upon the formatting of scripts in the page. For |
| example, scripts exist that store data in JavaScript comments, then walk the |
| DOM, retrieve the source code for the script, and read the data from the |
| comments. This will not work in conjunction with any minification tool. |
| Authors are encouraged instead to store data either in the body of a |
| script with a <code>src</code> (as shown in the example above), in hidden |
| <code><div></code> or <code><span></code> elements in the |
| page itself, or best of all in JavaScript string constants. |
| </p> |
| |
| <p> |
| This filter is sensitive to <a href="restricting_urls#aris"><code |
| >AvoidRenamingIntrospectiveJavascript</code></a>. For example, a |
| JavaScript file that calls |
| <code>document.getElementsByTagName('script')</code> will not be rewritten. |
| </p> |
| |
| </div> |
| <!--#include virtual="_footer.html" --> |
| </body> |
| </html> |
