perf(minify): remove h() function when not used

Author: manucorporat

src/compiler/app/app-core-browser.ts

@@ -61,7 +61,7 @@ export function wrapCoreJs(config: d.Config, jsContent: string, cmpRegistry: d.C
   const cmpLoaderRegistryStr = JSON.stringify(cmpLoaderRegistry);
 
   const output = [
-    generatePreamble(config) + '\n',
+    generatePreamble(config, {defaultBanner: true}) + '\n',
     `(${buildConditionals.es5 ? 'function' : ''}(w,d,x,n,h,c,r)${buildConditionals.es5 ? '' : '=>'}{`,
     buildConditionals.es5 ? `"use strict";\n` : ``,
     `(${buildConditionals.es5 ? 'function' : ''}(s)${buildConditionals.es5 ? '' : '=>'}{s&&(r=s.getAttribute('data-resources-url'))})(d.querySelector("script[data-namespace='${config.fsNamespace}']"));\n`,

src/compiler/app/app-core-esm.ts

@@ -54,7 +54,7 @@ async function writeEsmCore(config: d.Config, compilerCtx: d.CompilerCtx, buildC
 
   jsContent = jsContent.replace('__APP__HYDRATED__CSS__PLACEHOLDER__', config.hydratedCssClass);
 
-  jsContent = generatePreamble(config, { prefix: `${config.namespace}: Core, ${sourceTarget}` }) + '\n' + jsContent;
+  jsContent = generatePreamble(config, { prefix: `${config.namespace}: Core, ${sourceTarget}`, defaultBanner: true }) + '\n' + jsContent;
 
   await compilerCtx.fs.writeFile(coreEsm, jsContent);
 

src/compiler/app/test/app-core.spec.ts

@@ -28,7 +28,7 @@ describe('app-core', () => {
     });
 
     it('starts with the preamble', () => {
-      const preamble = generatePreamble(config).trim();
+      const preamble = generatePreamble(config, {defaultBanner: true}).trim();
       const lines = core.wrapCoreJs(config, '', cmpRegistry, {} as any).split('\n');
       expect(lines[0]).toEqual(preamble);
     });

src/compiler/build/test/build.spec.ts

@@ -54,22 +54,14 @@ describe('build', () => {
     expect(r.diagnostics).toEqual([]);
 
     const cmpA = await c.fs.readFile(path.join(root, 'www', 'build', 'app', 'cmp-a.es5.entry.js'));
-    expect(cmpA).toContain('Built with http://stenciljs.com');
-    expect(cmpA).toContain('App.loadBundle("cmp-a"');
-    expect(cmpA).toContain('someFn(!0)');
-    expect(cmpA).not.toContain('/** minify me plz **/');
+    expect(cmpA).toEqual(`App.loadBundle("cmp-a",["exports","./chunk-97e00951.js"],function(e,n){window;var u=function(){function e(){n.someFn(!0)}return Object.defineProperty(e,"is",{get:function(){return"cmp-a"},enumerable:!0,configurable:!0}),e}();e.CmpA=u,Object.defineProperty(e,"__esModule",{value:!0})});`);
 
     const cmpB = await c.fs.readFile(path.join(root, 'www', 'build', 'app', 'cmp-b.es5.entry.js'));
-    expect(cmpB).toContain('Built with http://stenciljs.com');
-    expect(cmpB).toContain('App.loadBundle("cmp-b"');
-    expect(cmpB).toContain('someFn(!0)');
-    expect(cmpB).not.toContain('/** minify me plz **/');
+    expect(cmpB).toEqual(`App.loadBundle("cmp-b",["exports","./chunk-97e00951.js"],function(e,n){window;var u=function(){function e(){n.someFn(!0)}return Object.defineProperty(e,"is",{get:function(){return"cmp-b"},enumerable:!0,configurable:!0}),e}();e.CmpB=u,Object.defineProperty(e,"__esModule",{value:!0})});`);
 
     const chunkFileName = r.filesWritten.find(f => f.includes('chunk') && f.includes('es5'));
     const chunk = await c.fs.readFile(chunkFileName);
-    expect(chunk).toContain('Built with http://stenciljs.com');
-    expect(chunk).toContain('.someFn=function(');
-    expect(chunk).toContain('console.log(!0)');
+    expect(chunk).toEqual(`App.loadBundle("chunk-97e00951.js",["exports"],function(o){window,o.someFn=function(o){o?console.log(!0):console.log(!1)}});`);
   });
 
   it('should minify es2017 build', async () => {
@@ -85,7 +77,7 @@ describe('build', () => {
     expect(r.hasSvg).toBe(false);
 
     const output = await c.fs.readFile(path.join(root, 'www', 'build', 'app', 'cmp-a.entry.js'));
-    expect(output).toContain('/*! Built with http://stenciljs.com */\nconst{h:t}=window.App;class s{static get is(){return"cmp-a"}}export{s as CmpA};');
+    expect(output).toEqual('class t{static get is(){return"cmp-a"}}export{t as CmpA};');
   });
 
   it('should build app files, app global and component', async () => {

src/compiler/bundle/derive-modules.ts

@@ -100,6 +100,6 @@ async function transpileEs5Bundle(config: d.Config, compilerCtx: d.CompilerCtx,
 
 function generateIntro(config: d.Config, isBrowser: boolean) {
   return isBrowser
-    ? `const { h } = window.${config.namespace};`
+    ? `const h = window.${config.namespace}.h;`
     : `import { h } from '../${getCoreEsmFileName(config)}';`;
 }

src/compiler/minifier.ts

@@ -6,24 +6,28 @@ import { generatePreamble } from './util';
  * Interal minifier, not exposed publicly.
  */
 export async function minifyJs(config: d.Config, compilerCtx: d.CompilerCtx, diagnostics: d.Diagnostic[], jsText: string, sourceTarget: d.SourceTarget, preamble: boolean, buildTimestamp?: string): Promise<string> {
-  const opts: any = { output: {}, compress: {}, mangle: true };
+  const opts: any = {
+    output: {beautify: false},
+    compress: {},
+    mangle: true
+  };
 
   if (sourceTarget === 'es5') {
     opts.ecma = 5;
     opts.output.ecma = 5;
     opts.compress.ecma = 5;
     opts.compress.arrows = false;
     opts.compress.pure_getters = true;
-    opts.output.beautify = false;
 
   } else {
     opts.ecma = 7;
     opts.toplevel = true;
+    opts.module = true;
     opts.output.ecma = 7;
     opts.compress.ecma = 7;
     opts.compress.arrows = true;
     opts.compress.module = true;
-    opts.output.beautify = false;
+    opts.compress.pure_getters = true;
   }
 
   if (config.logLevel === 'debug') {
@@ -55,9 +59,9 @@ export async function minifyJs(config: d.Config, compilerCtx: d.CompilerCtx, dia
   }
 
   const r = await config.sys.minifyJs(jsText, opts);
-
-  if (compilerCtx) {
-    if (r && r.diagnostics.length === 0 && typeof r.output === 'string') {
+  if (r && r.diagnostics.length === 0 && typeof r.output === 'string') {
+    r.output = auxMinify(r.output);
+    if (compilerCtx) {
       await compilerCtx.cache.put(cacheKey, r.output);
     }
   }
@@ -69,3 +73,7 @@ export async function minifyJs(config: d.Config, compilerCtx: d.CompilerCtx, dia
     return r.output;
   }
 }
+
+function auxMinify(jsText: string) {
+  return jsText.replace(/^window;/, '');
+}

src/compiler/style/test/style.spec.ts

@@ -100,7 +100,7 @@ describe('component-styles', () => {
     expect(iosContent).toContain(`body{font-family:Helvetica}`);
     expect(iosContent).toContain(`static get styleMode(){return"ios"}`);
 
-    const mdContent = await c.fs.readFile(path.join(root, 'www', 'build', 'app', 'o.entry.js'));
+    const mdContent = await c.fs.readFile(path.join(root, 'www', 'build', 'app', 'h.entry.js'));
     expect(mdContent).toContain(`body{font-family:Roboto}`);
     expect(mdContent).toContain(`static get styleMode(){return"md"}`);
   });

src/compiler/util.ts

@@ -80,7 +80,7 @@ export function isWebDevFile(filePath: string) {
 const WEB_DEV_EXT = ['js', 'jsx', 'html', 'htm', 'css', 'scss', 'sass', 'less', 'styl', 'pcss'];
 
 
-export function generatePreamble(config: d.Config, opts: { prefix?: string; suffix?: string } = {}) {
+export function generatePreamble(config: d.Config, opts: { prefix?: string; suffix?: string, defaultBanner?: boolean } = {}) {
   let preamble: string[] = [];
 
   if (config.preamble) {
@@ -93,7 +93,9 @@ export function generatePreamble(config: d.Config, opts: { prefix?: string; suff
     });
   }
 
-  preamble.push(BANNER);
+  if (opts.defaultBanner === true)  {
+    preamble.push(BANNER);
+  }
 
   if (typeof opts.suffix === 'string') {
     opts.suffix.split('\n').forEach(c => {
@@ -110,7 +112,11 @@ export function generatePreamble(config: d.Config, opts: { prefix?: string; suff
     return preamble.join('\n');
   }
 
-  return `/*! ${BANNER} */`;
+
+  if (opts.defaultBanner === true)  {
+    return `/*! ${BANNER} */`;
+  }
+  return '';
 }
 
 

test/apps/readme.md

@@ -3,7 +3,7 @@
 
 | File                       | Brotli   | Gzipped  | Minified |
 |----------------------------|----------|----------|----------|
-| hello-world.entry.js       | 110B     | 146B     | 159B     |
+| hello-world.entry.js       | 106B     | 135B     | 144B     |
 | app.core.js                | 3.52KB   | 3.90KB   | 8.33KB   |