fix(minify): minify chunks

Closes #518

src/compiler/bundle/bundle-modules.ts

@@ -1,16 +1,15 @@
 import { BuildCtx, CompilerCtx, Config, EntryModule, JSModuleMap } from '../../declarations';
-import { catchError } from '../util';
+import { catchError, minifyJs } from '../util';
 import { createBundle, writeEsModules, writeLegacyModules  } from './rollup-bundle';
 
 
-export async function generateBundleModules(config: Config, contextCtx: CompilerCtx, buildCtx: BuildCtx, entryModules: EntryModule[]): Promise<JSModuleMap> {
-
+export async function generateBundleModules(config: Config, compilerCtx: CompilerCtx, buildCtx: BuildCtx, entryModules: EntryModule[]): Promise<JSModuleMap> {
   const results: JSModuleMap = {};
 
   try {
     // run rollup, but don't generate yet
     // returned rollup bundle can be reused for es module and legacy
-    const rollupBundle = await createBundle(config, contextCtx, buildCtx, entryModules);
+    const rollupBundle = await createBundle(config, compilerCtx, buildCtx, entryModules);
 
     // bundle using only es modules and dynamic imports
     results.esm = await writeEsModules(config, rollupBundle);
@@ -23,9 +22,41 @@ export async function generateBundleModules(config: Config, contextCtx: Compiler
       results.es5 = await writeLegacyModules(config, rollupBundle, entryModules);
     }
 
+    if (config.minifyJs) {
+      await minifyChunks(config, compilerCtx, buildCtx, results);
+    }
+
   } catch (err) {
     catchError(buildCtx.diagnostics, err);
   }
 
   return results;
 }
+
+
+async function minifyChunks(config: Config, compilerCtx: CompilerCtx, buildCtx: BuildCtx, results: JSModuleMap) {
+  const promises = Object.keys(results).map((moduleType: 'esm' | 'es5') => {
+    const jsModuleList = results[moduleType];
+
+    const promises = Object.keys(jsModuleList)
+      .filter(m => m.startsWith('./chunk'))
+      .map(chunkKey => jsModuleList[chunkKey])
+      .map(async chunk => {
+        const sourceTarget = moduleType === 'es5' ? 'es5' : 'es2015';
+        const minifyJsResults = await minifyJs(config, compilerCtx, chunk.code, sourceTarget, true);
+
+        if (minifyJsResults.diagnostics.length) {
+          minifyJsResults.diagnostics.forEach(d => {
+            buildCtx.diagnostics.push(d);
+          });
+
+        } else {
+          chunk.code = minifyJsResults.output;
+        }
+      });
+
+    return Promise.all(promises);
+  });
+
+  return Promise.all(promises);
+}

src/compiler/bundle/generate-bundles.ts

@@ -1,8 +1,8 @@
 import { BuildCtx, CompilerCtx, ComponentMeta, ComponentRegistry, Config, EntryBundle, EntryModule, JSModuleMap, ModuleFile, SourceTarget } from '../../declarations';
 import { DEFAULT_STYLE_MODE } from '../../util/constants';
-import { hasError, minifyJs, pathJoin } from '../util';
 import { getAppDistDir, getAppWWWBuildDir, getBundleFilename } from '../app/app-file-naming';
 import { getStyleIdPlaceholder, getStylePlaceholder, replaceBundleIdPlaceholder } from '../../util/data-serialize';
+import { hasError, minifyJs, pathJoin } from '../util';
 import { transpileToEs5 } from '../transpile/core-build';
 
 
@@ -21,10 +21,10 @@ export async function generateBundles(config: Config, compilerCtx: CompilerCtx,
 
       return Promise.all(
         entryModule.modeNames.map(async modeName => {
-          const jsCode = Object.keys(jsModules).reduce((all, mType) => {
+          const jsCode = Object.keys(jsModules).reduce((all, moduleType: 'esm' | 'es5') => {
             return {
               ...all,
-              [mType]: jsModules[mType][bundleKeyPath].code
+              [moduleType]: jsModules[moduleType][bundleKeyPath].code
             };
           }, {} as {[key: string]: string});
 
@@ -34,7 +34,7 @@ export async function generateBundles(config: Config, compilerCtx: CompilerCtx,
     })
   );
 
-  const esmModules = jsModules['esm'];
+  const esmModules = jsModules.esm;
   const esmPromises = Object.keys(esmModules)
     .filter(key => !bundleKeys[key])
     .map(key => { return [key, esmModules[key]] as [string, { code: string}]; })
@@ -46,7 +46,7 @@ export async function generateBundles(config: Config, compilerCtx: CompilerCtx,
   await Promise.all(esmPromises);
 
   if (config.buildEs5) {
-    const es5Modules = jsModules['es5'];
+    const es5Modules = jsModules.es5;
     const es5Promises = Object.keys(es5Modules)
       .filter(key => !bundleKeys[key])
       .map(key => { return [key, es5Modules[key]] as [string, { code: string}]; })

src/compiler/util.ts

@@ -97,22 +97,26 @@ const WEB_DEV_EXT = ['js', 'jsx', 'html', 'htm', 'css', 'scss', 'sass', 'less',
 
 
 export async function minifyJs(config: Config, compilerCtx: CompilerCtx, jsText: string, sourceTarget: SourceTarget, preamble: boolean) {
-  const opts: any = { output: {}, compress: {}, mangle: {} };
+  const opts: any = { output: {}, compress: {}, mangle: true };
 
   if (sourceTarget === 'es5') {
     opts.ecma = 5;
     opts.output.ecma = 5;
     opts.compress.ecma = 5;
     opts.compress.arrows = false;
+    opts.output.beautify = false;
 
   } else {
     opts.ecma = 6;
     opts.output.ecma = 6;
     opts.compress.ecma = 6;
+    opts.toplevel = true;
     opts.compress.arrows = true;
+    opts.output.beautify = false;
   }
 
   if (config.logLevel === 'debug') {
+    opts.mangle = {};
     opts.mangle.keep_fnames = true;
     opts.compress.drop_console = false;
     opts.compress.drop_debugger = false;
@@ -123,6 +127,8 @@ export async function minifyJs(config: Config, compilerCtx: CompilerCtx, jsText:
     opts.output.preserve_line = true;
   }
 
+  opts.compress.passes = 2;
+
   if (preamble) {
     opts.output.preamble = generatePreamble(config);
   }

src/declarations/build.ts

@@ -177,7 +177,8 @@ export interface JSModuleList {
 }
 
 export interface JSModuleMap {
-  [key: string]: JSModuleList;
+  esm?: JSModuleList;
+  es5?: JSModuleList;
 }