Minify CSS and report size for PRs (#8881)

mapbox · Oct 21, 2019 · 992a2b6 · 992a2b6
1 parent 19f776d
commit 992a2b6
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 23 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -165,7 +165,11 @@ jobs:
     steps:
       - attach_workspace:
           at: .
-      - run: node build/check-bundle-size.js "dist/mapbox-gl.js" "GL JS - Minified"
+      - run:
+          name: Check bundle size
+          command: |
+            node build/check-bundle-size.js "dist/mapbox-gl.js" "JS"
+            node build/check-bundle-size.js "dist/mapbox-gl.css" "CSS"
 
   collect-stats:
     <<: *defaults

diff --git a/bench/gl-stats.js b/bench/gl-stats.js
@@ -3,12 +3,13 @@
 const puppeteer = require('puppeteer');
 const fs = require('fs');
 const zlib = require('zlib');
-const mapboxGlSrc = fs.readFileSync('dist/mapbox-gl.js', 'utf8');
+const mapboxGLJSSrc = fs.readFileSync('dist/mapbox-gl.js', 'utf8');
+const mapboxGLCSSSrc = fs.readFileSync('dist/mapbox-gl.css', 'utf8');
 const benchSrc = fs.readFileSync('bench/gl-stats.html', 'utf8');
 const {execSync} = require('child_process');
 
 const benchHTML = benchSrc
-    .replace(/<script src="..\/dist\/mapbox-gl.js"><\/script>/, `<script>${mapboxGlSrc}</script>`)
+    .replace(/<script src="..\/dist\/mapbox-gl.js"><\/script>/, `<script>${mapboxGLJSSrc}</script>`)
     .replace('MAPBOX_ACCESS_TOKEN', process.env.MAPBOX_ACCESS_TOKEN);
 
 function waitForConsole(page) {
@@ -32,8 +33,8 @@ function waitForConsole(page) {
     await page.setContent(benchHTML);
 
     const stats = JSON.parse(await waitForConsole(page));
-    stats["bundle_size"] = mapboxGlSrc.length;
-    stats["bundle_size_gz"] = zlib.gzipSync(mapboxGlSrc).length;
+    stats["bundle_size"] = mapboxGLJSSrc.length + mapboxGLCSSSrc.length;
+    stats["bundle_size_gz"] = zlib.gzipSync(mapboxGLJSSrc).length + zlib.gzipSync(mapboxGLCSSSrc).length;
     stats.dt = execSync('git show --no-patch --no-notes --pretty=\'%cI\' HEAD').toString().substring(0, 19);
     stats.commit = execSync('git rev-parse --short HEAD').toString().trim();
     stats.message = execSync('git show -s --format=%s HEAD').toString().trim();

diff --git a/build/check-bundle-size.js b/build/check-bundle-size.js
@@ -88,42 +88,47 @@ function getPriorSize(mergeBase) {
         ref: mergeBase
     }).then(({data}) => {
         const run = data.check_runs.find(run => run.name === name);
-        if (!run) {
-            console.log('No matching check found.');
-            return Promise.resolve(null);
+        if (run) {
+            const match = run.output.summary.match(/`[^`]+` is (\d+) bytes \([^\)]+\) uncompressed, (\d+) bytes \([^\)]+\) gzipped\./);
+            if (match) {
+                const prior = { size: +match[1], gzipSize: +match[2] };
+                console.log(`Prior size was ${prettyBytes(prior.size)}, gzipped ${prior.gzipSize}.`);
+                return prior;
+            }
         }
-        const prior = +run.output.summary.match(/`.*` is (\d+) bytes/)[1];
-        console.log(`Prior size was ${prettyBytes(prior)}.`);
-        return prior;
+        console.log('No matching check found.');
+        return Promise.resolve(null);
     });
 }
 
+function formatSize(size, priorSize) {
+    if (priorSize) {
+        const change = size - priorSize;
+        const percent = (change / priorSize) * 100;
+        return `${change >= 0 ? '+' : ''}${prettyBytes(change)} ${percent.toFixed(3)}% (${prettyBytes(size)})`;
+    } else {
+        return prettyBytes(size);
+    }
+}
+
 github.apps.createInstallationToken({installation_id: SIZE_CHECK_APP_INSTALLATION_ID})
     .then(({data}) => {
         github.authenticate({type: 'token', token: data.token});
         getMergeBase().then(getPriorSize).then(prior => {
-            const title = (() => {
-                if (prior) {
-                    const change = size - prior;
-                    const percent = (change / prior) * 100;
-                    return `${change >= 0 ? '+' : ''}${prettyBytes(change)} ${percent.toFixed(3)}% (${prettyBytes(size)})`;
-                } else {
-                    return prettyBytes(size);
-                }
-            })();
+            const title = `${formatSize(size, prior ? prior.size : null)}, gzipped ${formatSize(gzipSize, prior ? prior.gzipSize : null)}`;
 
             const megabit = Math.pow(2, 12);
             const downloadTime3G = (gzipSize / (3 * megabit)).toFixed(0);
             const downloadTime4G = (gzipSize / (10 * megabit)).toFixed(0);
-            const summary = `\`${file}\` is ${size} bytes (${prettyBytes(size)}) uncompressed, ${gzipSize} (${prettyBytes(gzipSize)}) gzipped.
+            const summary = `\`${file}\` is ${size} bytes (${prettyBytes(size)}) uncompressed, ${gzipSize} bytes (${prettyBytes(gzipSize)}) gzipped.
 That's **${downloadTime3G} seconds** over slow 3G (3 Mbps), **${downloadTime4G} seconds** over fast 4G (10 Mbps).`;
 
             console.log(`Posting check result:\n${title}\n${summary}`);
 
             return github.checks.create({
                 owner: 'mapbox',
                 repo: 'mapbox-gl-js',
-                name: `Size - ${label}`,
+                name,
                 head_branch: process.env['CIRCLE_BRANCH'],
                 head_sha: process.env['CIRCLE_SHA1'],
                 status: 'completed',

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "benchmark": "^2.1.4",
     "browserify": "^16.2.3",
     "chokidar": "^3.0.2",
+    "cssnano": "^4.1.10",
     "d3": "^4.12.0",
     "documentation": "~12.1.1",
     "ejs": "^2.5.7",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
     plugins: [
-        require('postcss-inline-svg')
+        require('postcss-inline-svg'),
+        require('cssnano')
     ]
 }