new-audit(unminified-javascript): detect savings from minifcation

lighthouse-core/audits/byte-efficiency/unminified-javascript.js

@@ -0,0 +1,87 @@
+/**
+ * @license Copyright 2017 Google Inc. All Rights Reserved.
+ * Licensed 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.
+ */
+'use strict';
+
+const ByteEfficiencyAudit = require('./byte-efficiency-audit');
+const esprima = require('esprima');
+
+const IGNORE_THRESHOLD_IN_PERCENT = .1;
+const IGNORE_THRESHOLD_IN_BYTES = 2048;
+
+class UnminifiedJavaScript extends ByteEfficiencyAudit {
+  /**
+   * @return {!AuditMeta}
+   */
+  static get meta() {
+    return {
+      name: 'unminified-javascript',
+      description: 'Unminified JavaScript',
+      informative: true,
+      helpText: 'Minify JavaScript to save network bytes.',
+      requiredArtifacts: ['Scripts', 'devtoolsLogs'],
+    };
+  }
+
+  /**
+   * @param {string} scriptContent
+   * @return {{minifiedLength: number, contentLength: number}}
+   */
+  static computeWaste(scriptContent, networkRecord) {
+    const contentLength = scriptContent.length;
+    let tokenLength = 0;
+    let tokenLengthWithMangling = 0;
+
+    const tokens = esprima.tokenize(scriptContent);
+    for (const token of tokens) {
+      tokenLength += token.value.length;
+      // assume all identifiers could be reduced to a single character
+      tokenLengthWithMangling += token.type === 'Identifier' ? 1 : token.value.length;
+    }
+
+    if (1 - tokenLength / contentLength < IGNORE_THRESHOLD_IN_PERCENT) return null;
+
+    const totalBytes = ByteEfficiencyAudit.estimateTransferSize(networkRecord, contentLength,
+      'script');
+    const wastedRatio = 1 - (tokenLength + tokenLengthWithMangling) / (2 * contentLength);
+    const wastedBytes = Math.round(totalBytes * wastedRatio);
+
+    return {
+      url: networkRecord.url,
+      totalBytes,
+      wastedBytes,
+      wastedPercent: 100 * wastedRatio,
+    };
+  }
+
+  /**
+   * @param {!Artifacts} artifacts
+   * @return {!Audit.HeadingsResult}
+   */
+  static audit_(artifacts, networkRecords) {
+    const scriptsByUrl = artifacts.Scripts;
+
+    const results = [];
+    for (const [url, scriptContent] of scriptsByUrl.entries()) {
+      const networkRecord = networkRecords.find(record => record.url === url);
+      if (!networkRecord || !scriptContent) continue;
+
+      const result = UnminifiedJavaScript.computeWaste(scriptContent, networkRecord);
+      if (!result || result.wastedBytes < IGNORE_THRESHOLD_IN_BYTES) continue;
+      results.push(result);
+    }
+
+    return {
+      results,
+      headings: [
+        {key: 'url', itemType: 'url', text: 'URL'},
+        {key: 'totalKb', itemType: 'text', text: 'Original'},
+        {key: 'potentialSavings', itemType: 'text', text: 'Potential Savings'},
+      ],
+    };
+  }
+}
+
+module.exports = UnminifiedJavaScript;

lighthouse-core/config/default.js

@@ -18,6 +18,7 @@ module.exports = {
     useThrottling: true,
     gatherers: [
       'url',
+      'scripts',
       'viewport',
       'viewport-dimensions',
       'theme-color',
@@ -143,6 +144,7 @@ module.exports = {
     'byte-efficiency/uses-long-cache-ttl',
     'byte-efficiency/total-byte-weight',
     'byte-efficiency/offscreen-images',
+    'byte-efficiency/unminified-javascript',
     'byte-efficiency/uses-webp-images',
     'byte-efficiency/uses-optimized-images',
     'byte-efficiency/uses-request-compression',
@@ -258,6 +260,7 @@ module.exports = {
         {id: 'script-blocking-first-paint', weight: 0, group: 'perf-hint'},
         {id: 'uses-responsive-images', weight: 0, group: 'perf-hint'},
         {id: 'offscreen-images', weight: 0, group: 'perf-hint'},
+        {id: 'unminified-javascript', weight: 0, group: 'perf-hint'},
         {id: 'uses-optimized-images', weight: 0, group: 'perf-hint'},
         {id: 'uses-webp-images', weight: 0, group: 'perf-hint'},
         {id: 'uses-request-compression', weight: 0, group: 'perf-hint'},

lighthouse-core/gather/gatherers/scripts.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright 2017 Google Inc. All Rights Reserved.
+ * Licensed 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.
+ */
+'use strict';
+
+const Gatherer = require('./gatherer');
+const WebInspector = require('../../lib/web-inspector');
+
+/**
+ * @fileoverview Gets JavaScript content
+ */
+class Scripts extends Gatherer {
+  /**
+   * @param {{driver: !Driver}} options
+   * @param {{networkRecords: !Array<WebInspector.NetworkRequest}} traceData
+   * @return {!Promise<!Map<string, string>>}
+   */
+  afterPass(options, traceData) {
+    const driver = options.driver;
+
+    const scriptContentMap = new Map();
+    const scriptRecords = traceData.networkRecords
+      .filter(record => record.resourceType() === WebInspector.resourceTypes.Script)
+
+    return scriptRecords.reduce((promise, record) => {
+      return promise
+        .then(() => {
+          return driver.getRequestContent(record.requestId)
+            .catch(err => null)
+            .then(content => {
+              if (!content) return;
+              scriptContentMap.set(record.url, content);
+            });
+        })
+        .then(() => scriptContentMap);
+    }, Promise.resolve(scriptContentMap));
+  }
+}
+
+module.exports = Scripts;

package.json

@@ -81,6 +81,7 @@
     "chrome-launcher": "0.8.1",
     "configstore": "^3.1.1",
     "devtools-timeline-model": "1.1.6",
+    "esprima": "^4.0.0",
     "inquirer": "^3.3.0",
     "jpeg-js": "0.1.2",
     "js-library-detector": "^4.0.0",