From: Arul.Nambi Date: Thu, 8 Nov 2018 18:16:10 +0000 (-0500) Subject: Decreasing the initial load time X-Git-Tag: 1.4.0~14 X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=commitdiff_plain;h=bac46bcf87413e3a7f688530c3391992654e701b Decreasing the initial load time Issue-ID: AAI-1881 Change-Id: I1638a33096632e4853247e10b13ed5e1a540a4cb Signed-off-by: Arul.Nambi --- diff --git a/gulpfile.js b/gulpfile.js index ab62350..fcb485d 100644 --- 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 --- 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 --- 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 --- 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 }),