core(build): add js minification to inline-fs plugin (GoogleChrome#13272

)

build/plugins/inline-fs.js

@@ -12,6 +12,7 @@ const path = require('path');
 const acorn = require('acorn');
 const MagicString = require('magic-string').default;
 const resolve = require('resolve');
+const terser = require('terser');
 
 // ESTree provides much better types for AST nodes. See https://github.com/acornjs/acorn/issues/946
 /** @typedef {import('estree').Node} Node */
@@ -195,9 +196,15 @@ async function getReadFileReplacement(node, filepath) {
  throw new AstError('only utf8 readFileSync is supported', node.arguments[1]);
  }
 
- const readContent = await fs.promises.readFile(constructedPath, 'utf8');
+ let readContent = await fs.promises.readFile(constructedPath, 'utf8');
 
- // TODO(bckenny): minify inlined javascript.
+ // Minify inlined javascript.
+ if (constructedPath.endsWith('.js')) {
+ const result = await terser.minify({[constructedPath]: readContent}, {ecma: 2019});
+ if (result.code) {
+ readContent = result.code;
+ }
+ }
 
  // Escape quotes, new lines, etc so inlined string doesn't break host file.
  return JSON.stringify(readContent);

build/test/plugins/inline-fs-test.js

@@ -18,11 +18,11 @@ describe('inline-fs', () => {
  const tmpPath = `${LH_ROOT}/.tmp/inline-fs/test.txt`;
  const tmpDir = path.dirname(tmpPath);
 
- beforeAll(() => {
+ beforeEach(() => {
  fs.mkdirSync(tmpDir, {recursive: true});
  });
 
- afterAll(() => {
+ afterEach(() => {
  fs.rmSync(tmpDir, {recursive: true, force: true});
  });
 
@@ -347,6 +347,31 @@ describe('inline-fs', () => {
  }],
  });
  });
+
+ it('minifies inlined javascript files', async () => {
+ const jsPath = `${tmpDir}/test.js`;
+ // Completion value of `3` when evaluated.
+ const jsContent = 'function add(a, b) {\nconst unused = a * b;return a + b;\n}\nadd(1, 2);';
+ fs.writeFileSync(jsPath, jsContent);
+
+ // When evaluated, `content` sets `sum` to 3 and returns it, also completing with `3`.
+ const content = `const sum = eval(fs.readFileSync('${jsPath}', 'utf8')); sum;`;
+ const unminifiedResult = `const sum = eval("${jsContent}"); sum;`;
+
+ // Verify that it's inlined and result is smaller than `unminifiedResult`.
+ const {code, warnings} = await inlineFs(content, filepath);
+ if (code === null) {
+ throw new Error('js was not inlined by readFileSync');
+ }
+ expect(code.length).toBeGreaterThan(40);
+ expect(code.length).toBeLessThan(unminifiedResult.length - 20);
+ expect(warnings).toEqual([]);
+
+ // Verify that minification was valid. End result should be something like:
+ // `const sum = eval('function add(a,b){return a+b}add(1,2);')sum;`
+ const evaledResult = eval(code);
+ expect(evaledResult).toEqual(3);
+ });
  });
 
  describe('fs.readdirSync', () => {