feature(webpack): use a vendor bundle to minimize code that needs re-bundling and source map generation

Author: danbucholtz

config/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
   output: {
     path: '{{BUILD}}',
     publicPath: 'build/',
-    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
+    filename: '[name].js',
     devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
   },
   devtool: process.env.IONIC_SOURCE_MAP_TYPE,
@@ -38,7 +38,8 @@ module.exports = {
 
   plugins: [
     ionicWebpackFactory.getIonicEnvironmentPlugin(),
-    new ModuleConcatPlugin()
+    ionicWebpackFactory.getCommonChunksPlugin(),
+    new ModuleConcatPlugin(),
   ],
 
   // Some libraries import Node modules but don't use them in the browser.
@@ -48,4 +49,4 @@ module.exports = {
     net: 'empty',
     tls: 'empty'
   }
-};
+};

package-lock.json

@@ -1,34 +1,15 @@
-import { join } from 'path';
 import * as CommonChunksPlugin from 'webpack/lib/optimize/CommonsChunkPlugin';
 
-export const NODE_MODULES = join(process.cwd(), 'node_modules');
-export const RXJS = join(NODE_MODULES, 'rxjs');
-export const ZONEJS = join(NODE_MODULES, 'zone.js');
-export const ANGULAR = join(NODE_MODULES, '@angular');
-export const IONIC = join(NODE_MODULES, 'ionic-angular');
+import * as Constants from '../util/constants';
+import { getStringPropertyValue } from '../util/helpers';
 
-export function getIonicDependenciesCommonChunksPlugin() {
+export function getCommonChunksPlugin() {
   return new CommonChunksPlugin({
-    name: 'known-vendors',
-    minChunks: checkIfModuleIsIonicDependency
+    name: 'vendor',
+    minChunks: checkIfInNodeModules
   });
 }
 
-export function getNonIonicDependenciesCommonChunksPlugin() {
-  return new CommonChunksPlugin({
-    name: 'unknown-vendors',
-    minChunks: checkIfModuleIsNodeModuleButNotIonicDepenedency
-  });
-}
-
-function isIonicDependency(modulePath: string) {
-  return modulePath.startsWith(RXJS) || modulePath.startsWith(ZONEJS) || modulePath.startsWith(ANGULAR) || modulePath.startsWith(IONIC);
-}
-
-export function checkIfModuleIsIonicDependency(module: any) {
-  return !!(module.userRequest && isIonicDependency(module.userRequest));
-}
-
-export function checkIfModuleIsNodeModuleButNotIonicDepenedency(module: any) {
-  return !!(module.userRequest && module.userRequest.startsWith(NODE_MODULES) && !isIonicDependency(module.userRequest));
+function checkIfInNodeModules(webpackModule: any) {
+  return webpackModule && webpackModule.userRequest && webpackModule.userRequest.startsWith(getStringPropertyValue(Constants.ENV_VAR_NODE_MODULES_DIR));
 }

src/webpack/common-chunks-plugins.spec.ts

@@ -1,4 +1,4 @@
-import { getIonicDependenciesCommonChunksPlugin, getNonIonicDependenciesCommonChunksPlugin } from './common-chunks-plugins';
+import { getCommonChunksPlugin } from './common-chunks-plugins';
 import { IonicEnvironmentPlugin } from './ionic-environment-plugin';
 import { provideCorrectSourcePath } from './source-mapper';
 import { getContext } from '../util/helpers';
@@ -12,10 +12,4 @@ export function getSourceMapperFunction(): Function {
   return provideCorrectSourcePath;
 }
 
-export function getNonIonicCommonChunksPlugin(): any {
-  return getNonIonicDependenciesCommonChunksPlugin();
-}
-
-export function getIonicCommonChunksPlugin(): any {
-  return getIonicDependenciesCommonChunksPlugin();
-}
+export { getCommonChunksPlugin };