Decreasing the initial load time

Issue-ID: AAI-1881
Change-Id: I1638a33096632e4853247e10b13ed5e1a540a4cb
Signed-off-by: Arul.Nambi <arul.nambi@amdocs.com>

diff --git a/gulpfile.js b/gulpfile.js
index ab62350..fcb485d 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -46,12 +46,16 @@ let path = {
        aaiCss: dist + '/css',
        saCss: dist + '/editAttributes/css',
        war: [dist + '**/*.html', dist + '**/*.js', dist + '**/*.{css,png,svg,eot,ttf,woff,woff2,otf}', dist + '**/*.json', 'webapp/**'],
+       bundleSrc:[dist + '**/*.map'],
        wardest: dist
 };
 
 taskMaker.defineTask('clean', {taskName: 'clean', src: path.output});
 taskMaker.defineTask('copy', {taskName: 'copy-aai-index.html', src: path.aaiIndex, dest: path.output, rename: 'index.html'});
 taskMaker.defineTask('copy', {taskName: 'copy-sa-index.html', src: path.saIndex, dest: path.saOutput, rename: 'index.html'});
+taskMaker.defineTask('copy', {taskName: 'copy-sa-index.html', src: path.saIndex, dest: path.saOutput, rename: 'index.html'});
+taskMaker.defineTask('copy', {taskName: 'copy-map-file', src: path.bundleSrc, dest: path.output, rename: 'mappingFile'});
+taskMaker.defineTask('clean', {taskName: 'clean-map-file', src: path.bundleSrc});
 /** Uncomment the loine below to generate a .war file with a local build */
 // taskMaker.defineTask('compress', {taskName: 'compress-war', src: path.war, filename: appName + '.war', dest: path.wardest})
 
@@ -69,7 +73,7 @@ gulp.task('dev', callback => {
 
 // Production build
 gulp.task('build', callback => {
-       return runSequence('clean', ['copy-stuff'], 'prod', callback);
+       return runSequence('clean', ['copy-stuff'], 'prod', 'copy-map-file', 'clean-map-file', callback);
        /** Uncomment the loine below to generate a .war file with a local build */
        //return runSequence('clean', ['copy-stuff'], 'prod', 'compress-war', callback);
 });
@@ -81,48 +85,7 @@ gulp.task('prod', () => {
 
        return new Promise((resolve, reject)=> {
                // configure webpack for production
-               let webpackProductionConfig = Object.create(webpackConfig);
-
-               for (let name in webpackProductionConfig.entry) {
-                       webpackProductionConfig.entry[name] = webpackProductionConfig.entry[name].filter(path => !path.startsWith('webpack'));
-               }
-
-               webpackProductionConfig.cache = true;
-               webpackProductionConfig.output = {
-                       path: localPath.join(__dirname, 'dist'),
-                       publicPath: '',
-                       filename: '[name].js'
-               };
-               webpackProductionConfig.resolveLoader = {
-                       root: [localPath.resolve('.')],
-                       alias: {
-                               'config-json-loader': 'tools/webpack/config-json-loader/index.js'
-                       }
-               };
-
-               // remove source maps
-               webpackProductionConfig.devtool = undefined;
-               webpackProductionConfig.module.preLoaders = webpackProductionConfig.module.preLoaders.filter(preLoader => preLoader.loader != 'source-map-loader');
-               webpackProductionConfig.module.loaders.forEach(loader => {
-                       if (loader.loaders && loader.loaders[0] === 'style') {
-                               loader.loaders = loader.loaders.map(loaderName => loaderName.replace('?sourceMap', ''));
-                       }
-               });
-
-               webpackProductionConfig.module.loaders.push({test: /config.json$/, loaders: ['config-json-loader']});
-               webpackProductionConfig.eslint = {
-                       configFile: './.eslintrc',
-                       failOnError: true
-               };
-               webpackProductionConfig.plugins = [
-                       new webpack.DefinePlugin({
-                               'process.env.NODE_ENV': JSON.stringify('production')
-                         }),
-                       new webpack.optimize.DedupePlugin(),
-                       new webpack.optimize.UglifyJsPlugin()
-               ];
-
-               // run production build
+               let webpackProductionConfig = webpackConfig;
                webpack(webpackProductionConfig, function (err, stats) {
                        console.log('[webpack:build]', stats.toString());
                        if (err || stats.hasErrors()) {
@@ -138,7 +101,6 @@ gulp.task('prod', () => {
 
 });
 
-
 gulp.task('webpack-dev-server', () => {
        let myConfig = Object.create(devWebpackConfig);
 

diff --git a/package.json b/package.json
index ebcb73e..8411ee5 100644 (file)
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "crypto-js": "^3.1.9-1",
     "d3": "^4.12.0",
     "es6-promise": "^3.2.1",
-    "filter-bar-utils": "1.0.1",
+    "filter-bar-utils": "1.0.2",
     "gulp-sass": "^3.0.0",
     "jquery": "^2.2.2",
     "loadable-components": "^2.2.2",
@@ -52,7 +52,7 @@
     "uuid-js": "^0.7.5",
     "validator": "^4.3.0",
     "velocity-react": "^1.4.1",
-    "vertical-filter-bar": "1.0.10"
+    "vertical-filter-bar": "1.0.11"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",
@@ -105,6 +105,7 @@
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1",
+    "webpack-bundle-analyzer": "^3.0.3",
     "webpack-dev-server": "^1.14.1"
   },
   "jest": {

diff --git a/webpack.config.js b/webpack.config.js
index 39e3a04..b357f9a 100644 (file)
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -20,12 +20,12 @@
  */
 'use strict';
 
-var path = require('path');
 var webpack = require('webpack');
-var devPort = process.env.PORT || 8001;
+var path = require('path');
 
 module.exports = {
-  devtool: 'eval-source-map',
+  devtool: 'source-map',
+  cache: 'true',
   entry: {
     bundle: [
       'app/main.app.jsx',
@@ -39,7 +39,8 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
     publicPath: ``,
-    filename: '[name].js'
+    filename: '[name].js',
+    sourceMapFilename: '[name].js.map'
   },
   resolve: {
     root: [path.resolve('.')],
@@ -52,44 +53,34 @@ module.exports = {
     },
     extensions: ["", ".webpack.js", ".web.js", ".js", ".json", ".jsx"]
   },
-  devServer: {
-    port: devPort,
-    historyApiFallback: true,
-    publicPath: `http://localhost:${devPort}/`,
-    contentBase: path.join(__dirname, 'dist'),
-    hot: true,
-    progress: true,
-    inline: true,
-    debug: true,
-    stats: {
-      colors: true
-    }
+  resolveLoader: {
+    root: [path.resolve('.')],
+    alias: {
+      'config-json-loader': 'tools/webpack/config-json-loader/index.js'
+  }
   },
   module: {
-    preLoaders: [{
-      test: /\.(js|jsx)$/,
-      loader: 'source-map-loader'
-    }],
     loaders: [
-      {test: /\.(js|jsx)$/, loaders: ['babel-loader', 'eslint-loader', 'source-map-loader'], exclude: /node_modules/},
+      {test: /\.(js|jsx)$/, loaders: ['babel-loader', 'eslint-loader'], exclude: /node_modules/},
       {test: /\.(css|scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
       // required for font icons
       {test: /\.(woff|woff2|ttf|eot|otf)(\?.*)?$/, loader: 'url-loader?limit=163840&mimetype=application/font-woff&name=[name].[ext]'},
       {test: /\.(png|jpg|svg)(\?.*)?$/, loader: 'url-loader?limit=163840'},
       {test: /\.json$/, loaders: ['json']},
-        { test: /\.xml$/, loader: 'xml-loader' }
+      { test: /\.xml$/, loader: 'xml-loader' }
     ]
   },
   eslint: {
     configFile: './.eslintrc',
+    failOnError: true,
     emitError: true,
     emitWarning: true
   },
   plugins: [
     new webpack.DefinePlugin({
-      DEBUG: true
-    }),
-
-    new webpack.HotModuleReplacementPlugin()
+      'process.env.NODE_ENV': JSON.stringify('production')
+      }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
   ]
 };

diff --git a/webpack.devConfig.js b/webpack.devConfig.js
index e4bf80b..9f13b15 100644 (file)
--- a/webpack.devConfig.js
+++ b/webpack.devConfig.js
@@ -23,9 +23,10 @@
 var path = require('path');
 var webpack = require('webpack');
 var devPort = process.env.PORT || 8001;
+var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
-  devtool: 'eval-source-map',
+  devtool: 'source-map',
   entry: {
     bundle: [
       'app/main.app.jsx',
@@ -39,7 +40,8 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
     publicPath: ``,
-    filename: '[name].js'
+    filename: '[name].js',
+    sourceMapFilename: '[name].js.map'
   },
   resolve: {
     root: [path.resolve('.')],
@@ -67,9 +69,6 @@ module.exports = {
     }
   },
   module: {
-    preLoaders: [
-      {test: /\.(js|jsx)$/, loader: 'source-map-loader'}
-    ],
     loaders: [
       {test: /\.(js|jsx)$/, loaders: ['babel-loader', 'eslint-loader'], exclude: /node_modules/},
       {test: /\.(css|scss)$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},
@@ -86,6 +85,7 @@ module.exports = {
     emitWarning: true
   },
   plugins: [
+    //new BundleAnalyzerPlugin(),
     new webpack.DefinePlugin({
       DEBUG: true
     }),