From 141cb23153984c8c1d2b0e1e68669407ffef746e Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Fri, 7 Jul 2017 10:55:15 -0500 Subject: [PATCH] feature(webpack): use a vendor bundle to minimize code that needs re-bundling and source map generation --- config/webpack.config.js | 7 +- package-lock.json | 38 +++++------ src/webpack/common-chunks-plugins.spec.ts | 78 ----------------------- src/webpack/common-chunks-plugins.ts | 33 ++-------- src/webpack/ionic-webpack-factory.ts | 10 +-- 5 files changed, 32 insertions(+), 134 deletions(-) delete mode 100644 src/webpack/common-chunks-plugins.spec.ts diff --git a/config/webpack.config.js b/config/webpack.config.js index 30a58cc5..56dc2b63 100644 --- a/config/webpack.config.js +++ b/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' } -}; +}; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index dea31a27..7d4939a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -117,14 +117,14 @@ "integrity": "sha512-bT9q2eqH/E72AGBQKT50dh6AXzheTqigGZ1GwDiwmx7vfHff0bZOrvUWjvGpNWPNkRmX1vDF6wonG6rlpBHb1A==", "dev": true, "requires": { - "@types/express-serve-static-core": "4.0.48", + "@types/express-serve-static-core": "4.0.49", "@types/serve-static": "1.7.31" } }, "@types/express-serve-static-core": { - "version": "4.0.48", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.0.48.tgz", - "integrity": "sha512-+W+fHO/hUI6JX36H8FlgdMHU3Dk4a/Fn08fW5qdd7MjPP/wJlzq9fkCrgaH0gES8vohVeqwefHwPa4ylVKyYIg==", + "version": "4.0.49", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.0.49.tgz", + "integrity": "sha512-b7mVHoURu1xaP/V6xw1sYwyv9V0EZ7euyi+sdnbnTZxEkAh4/hzPsI6Eflq+ZzHQ/Tgl7l16Jz+0oz8F46MLnA==", "dev": true, "requires": { "@types/node": "7.0.33" @@ -203,7 +203,7 @@ "integrity": "sha1-FUVt6NmNa0z/Mb5savdJKuY/Uho=", "dev": true, "requires": { - "@types/express-serve-static-core": "4.0.48", + "@types/express-serve-static-core": "4.0.49", "@types/mime": "1.3.1" } }, @@ -505,7 +505,7 @@ "requires": { "ansi-styles": "3.1.0", "escape-string-regexp": "1.0.5", - "supports-color": "4.1.0" + "supports-color": "4.2.0" } }, "postcss": { @@ -515,7 +515,7 @@ "requires": { "chalk": "2.0.1", "source-map": "0.5.6", - "supports-color": "4.1.0" + "supports-color": "4.2.0" } } } @@ -2302,6 +2302,11 @@ "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz", "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=" }, + "fast-deep-equal": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz", + "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8=" + }, "fast-levenshtein": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", @@ -4955,7 +4960,7 @@ "chalk": "1.1.3", "cli-table": "0.3.1", "lodash.assign": "4.2.0", - "node-emoji": "1.5.1" + "node-emoji": "1.6.1" } }, "media-typer": { @@ -5124,9 +5129,9 @@ "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" }, "node-emoji": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.5.1.tgz", - "integrity": "sha1-/ZGOQSdpv4xEgFEjgjOECyr/FqE=", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.6.1.tgz", + "integrity": "sha512-cMmAHLDT/QHCSuHBL3vQ8qXwFypx/3zN1sForcR65OM8FbC+LKefUCI29NAik4Crpiv2byyWj1SWZRlNBtbi2g==", "dev": true, "requires": { "string.prototype.codepointat": "0.2.0" @@ -6471,9 +6476,9 @@ } }, "supports-color": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz", - "integrity": "sha1-kswUuz2tiSjKVlbDPhmhnyCvXHo=", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.0.tgz", + "integrity": "sha512-Ts0Mu/A1S1aZxEJNG88I4Oc9rcZSBFNac5e27yh4j2mqbhZSSzR1Ah79EYwSn9Zuh7lrlGD2cVGzw1RKGzyLSg==", "requires": { "has-flag": "2.0.0" } @@ -7116,11 +7121,6 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=" }, - "fast-deep-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz", - "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8=" - }, "has-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", diff --git a/src/webpack/common-chunks-plugins.spec.ts b/src/webpack/common-chunks-plugins.spec.ts deleted file mode 100644 index 0454665f..00000000 --- a/src/webpack/common-chunks-plugins.spec.ts +++ /dev/null @@ -1,78 +0,0 @@ -import * as commonChunksPlugins from './common-chunks-plugins'; -import { join } from 'path'; - -describe('common-chunks-plugins', () => { - describe('checkIfModuleIsIonicDependency', () => { - it('should return false when userRequest is null', () => { - const result = commonChunksPlugins.checkIfModuleIsIonicDependency({}); - expect(result).toEqual(false); - }); - - it('should return false when userRequest is an unknown 3rd party module', () => { - const result = commonChunksPlugins.checkIfModuleIsIonicDependency({ - userRequest: join(commonChunksPlugins.NODE_MODULES, 'moment', 'index.js') - }); - expect(result).toEqual(false); - }); - - it('should return true when userRequest is an known 3rd party module', () => { - const angularResult = commonChunksPlugins.checkIfModuleIsIonicDependency({ - userRequest: join(commonChunksPlugins.ANGULAR, 'src', 'something.js') - }); - - const rxjsResult = commonChunksPlugins.checkIfModuleIsIonicDependency({ - userRequest: join(commonChunksPlugins.RXJS, 'src', 'something.js') - }); - - const ionicResult = commonChunksPlugins.checkIfModuleIsIonicDependency({ - userRequest: join(commonChunksPlugins.IONIC, 'src', 'something.js') - }); - - const zoneResult = commonChunksPlugins.checkIfModuleIsIonicDependency({ - userRequest: join(commonChunksPlugins.ZONEJS, 'src', 'something.js') - }); - - expect(angularResult).toEqual(true); - expect(rxjsResult).toEqual(true); - expect(ionicResult).toEqual(true); - expect(zoneResult).toEqual(true); - }); - }); - - describe('checkIfModuleIsNodeModuleButNotIonicDepenedency', () => { - it('should return false when userRequest is null', () => { - const result = commonChunksPlugins.checkIfModuleIsNodeModuleButNotIonicDepenedency({}); - expect(result).toEqual(false); - }); - - it('should return true when userRequest is an unknown 3rd party module', () => { - const result = commonChunksPlugins.checkIfModuleIsNodeModuleButNotIonicDepenedency({ - userRequest: join(commonChunksPlugins.NODE_MODULES, 'moment', 'index.js') - }); - expect(result).toEqual(true); - }); - - it('should return false when userRequest is a known 3rd party module', () => { - const angularResult = commonChunksPlugins.checkIfModuleIsNodeModuleButNotIonicDepenedency({ - userRequest: join(commonChunksPlugins.ANGULAR, 'src', 'something.js') - }); - - const rxjsResult = commonChunksPlugins.checkIfModuleIsNodeModuleButNotIonicDepenedency({ - userRequest: join(commonChunksPlugins.RXJS, 'src', 'something.js') - }); - - const ionicResult = commonChunksPlugins.checkIfModuleIsNodeModuleButNotIonicDepenedency({ - userRequest: join(commonChunksPlugins.IONIC, 'src', 'something.js') - }); - - const zoneResult = commonChunksPlugins.checkIfModuleIsNodeModuleButNotIonicDepenedency({ - userRequest: join(commonChunksPlugins.ZONEJS, 'src', 'something.js') - }); - - expect(angularResult).toEqual(false); - expect(rxjsResult).toEqual(false); - expect(ionicResult).toEqual(false); - expect(zoneResult).toEqual(false); - }); - }); -}); diff --git a/src/webpack/common-chunks-plugins.ts b/src/webpack/common-chunks-plugins.ts index 2bac1ee8..ba92a7c8 100644 --- a/src/webpack/common-chunks-plugins.ts +++ b/src/webpack/common-chunks-plugins.ts @@ -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)); } diff --git a/src/webpack/ionic-webpack-factory.ts b/src/webpack/ionic-webpack-factory.ts index 05baea4f..a2297a60 100644 --- a/src/webpack/ionic-webpack-factory.ts +++ b/src/webpack/ionic-webpack-factory.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 };