Try to optimize frontend

2 files changed, 27 insertions, 26 deletions

diff --git a/client/config/webpack.common.js b/client/config/webpack.common.js
index 000699aa5..83bcbc240 100644
--- a/client/config/webpack.common.js
+++ b/client/config/webpack.common.js
@@ -11,6 +11,7 @@ const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
+const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
 const ngcWebpack = require('ngc-webpack')
 
 const WebpackNotifierPlugin = require('webpack-notifier')
@@ -216,7 +217,9 @@ module.exports = function (options) {
       new CommonsChunkPlugin({
         name: 'vendor',
         chunks: ['main'],
-        minChunks: module => /node_modules\//.test(module.resource)
+        minChunks: module => {
+          return /node_modules\//.test(module.resource)
+        }
       }),
 
       // Specify the correct order the scripts will be injected in
@@ -245,20 +248,6 @@ module.exports = function (options) {
       ),
 
       /*
-       * Plugin: ScriptExtHtmlWebpackPlugin
-       * Description: Enhances html-webpack-plugin functionality
-       * with different deployment options for your scripts including:
-       *
-       * See: https://github.com/numical/script-ext-html-webpack-plugin
-       */
-      new ScriptExtHtmlWebpackPlugin({
-        sync: [ /polyfill|vendor/ ],
-        defaultAttribute: 'async',
-        preload: [/polyfill|vendor|main/],
-        prefetch: [/chunk/]
-      }),
-
-      /*
        * Plugin: HtmlWebpackPlugin
        * Description: Simplifies creation of HTML files to serve your webpack bundles.
        * This is especially useful for webpack bundles that include a hash in the filename
@@ -277,6 +266,20 @@ module.exports = function (options) {
         inject: 'body'
       }),
 
+      /*
+       * Plugin: ScriptExtHtmlWebpackPlugin
+       * Description: Enhances html-webpack-plugin functionality
+       * with different deployment options for your scripts including:
+       *
+       * See: https://github.com/numical/script-ext-html-webpack-plugin
+       */
+      new ScriptExtHtmlWebpackPlugin({
+        sync: [ /polyfill|vendor/ ],
+        defaultAttribute: 'async',
+        preload: [/polyfill|vendor|main/],
+        prefetch: [/chunk/]
+      }),
+
       new WebpackNotifierPlugin({ alwaysNotify: true }),
 
       /**
@@ -296,7 +299,9 @@ module.exports = function (options) {
       new ngcWebpack.NgcWebpackPlugin({
         disabled: !AOT,
         tsConfig: helpers.root('tsconfig.webpack.json')
-      })
+      }),
+
+      new InlineManifestWebpackPlugin(),
     ],
 
     /*
diff --git a/client/config/webpack.prod.js b/client/config/webpack.prod.js
index 777c816e8..ecd7914c7 100644
--- a/client/config/webpack.prod.js
+++ b/client/config/webpack.prod.js
@@ -17,6 +17,8 @@ const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplaceme
 const OptimizeJsPlugin = require('optimize-js-plugin')
 const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
 /**
  * Webpack Constants
  */
@@ -120,15 +122,10 @@ module.exports = function (env) {
           sourceMap: false
         }),
 
-        /**
-         * Plugin: DedupePlugin
-         * Description: Prevents the inclusion of duplicate code into your bundle
-         * and instead applies a copy of the function at runtime.
-         *
-         * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-         * See: https://github.com/webpack/docs/wiki/optimization#deduplication
-         */
-        // new DedupePlugin(),
+        new ExtractTextPlugin({
+          filename: '[name].[contenthash].css',
+          allChunks: true
+        }),
 
         /**
          * Plugin: DefinePlugin
@@ -158,7 +155,6 @@ module.exports = function (env) {
         *
         * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
         */
-        // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
         new UglifyJsPlugin({
           parallel: true,
           uglifyOptions: {