Configured “webpack-bundle-analyzer”

notable · May 17, 2019 · 9613033 · 9613033
1 parent dbe7a94
commit 9613033
Show file tree

Hide file tree

Showing 7 changed files with 210 additions and 61 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,5 @@ bower_components
 node_modules
 dist
 releases
+webpack.report.main.html
+webpack.report.renderer.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "build:win": "npm run compile && electron-builder --win && npm run script:build:fixlatestwin",
     "build:linux": "npm run compile && electron-builder --linux && npm run script:build:fixlatestlinux",
     "build:all": "npm run clean:releases && npm run compile && electron-builder -mwl && npm run script:build:fixlatestwin && npm run script:build:fixlatestlinux",
+    "bundle:analyze:main": "open webpack.report.main.html",
+    "bundle:analyze:renderer": "open webpack.report.renderer.html",
     "script:build:fixlatestlinux": "node -e \"require ( './scripts/build/fix_latest_linux' )()\"",
     "script:build:fixlatestwin": "node -e \"require ( './scripts/build/fix_latest_win' )()\"",
     "svelto:dev": "svelto build --env development",
@@ -28,11 +30,11 @@
   "electronWebpack": {
     "staticSourceDirectory": "src/renderer/template/dist",
     "main": {
-      "webpackConfig": "webpack.js"
+      "webpackConfig": "webpack.main.js"
     },
     "renderer": {
       "template": "src/renderer/index.html",
-      "webpackConfig": "webpack.js"
+      "webpackConfig": "webpack.renderer.js"
     }
   },
   "build": {
@@ -217,6 +219,7 @@
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^3.4.5",
     "webpack": "^4.31.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-exclude-assets-plugin": "^0.1.1"
   }
 }
diff --git a/webpack.base.js b/webpack.base.js
@@ -0,0 +1,71 @@
+
+/* IMPORT */
+
+const {BundleAnalyzerPlugin} = require ( 'webpack-bundle-analyzer' ),
+      ExcludeAssetsPlugin = require ( 'webpack-exclude-assets-plugin' ),
+      TerserPlugin = require ( 'terser-webpack-plugin' ),
+      TSConfigPathsPlugin = require ( 'tsconfig-paths-webpack-plugin' ),
+      path = require ( 'path' ),
+      webpack = require ( 'webpack' );
+
+/* PLUGINS */
+
+function PluginSkeletonOptimization ( compiler ) { // Loading heavy resources after the skeleton
+  compiler.plugin ( 'compilation', compilation => {
+    compilation.hooks.htmlWebpackPluginAfterHtmlProcessing = {
+      async promise ( data ) {
+        data.html = data.html.replace ( /<link(.*?)rel="stylesheet">(.*?)<body>(.*?)<script/, '$2<body>$3<link$1rel="stylesheet"><script' ); // Moving the main CSS to the bottom in order to make the skeleton load faster
+        return data;
+      }
+    };
+  });
+}
+
+/* BASE */
+
+function base ( options ) { //TODO: Maybe we don't need to define multiple webpack configs //URL: https://github.com/electron-userland/electron-webpack/issues/290
+
+  return {
+    resolve: {
+      alias: {
+        'react-dom': process.env.NODE_ENV !== 'production' ? '@hot-loader/react-dom' : 'react-dom'
+      },
+      plugins: [
+        new TSConfigPathsPlugin ()
+      ]
+    },
+    plugins: [
+      new ExcludeAssetsPlugin ({
+        path: [
+          '\.(eot|ttf|woff)$' // Unused font formats
+        ]
+      }),
+      new webpack.DefinePlugin ({
+        'Environment.isDevelopment': JSON.stringify ( process.env.NODE_ENV !== 'production' )
+      }),
+      PluginSkeletonOptimization,
+      new BundleAnalyzerPlugin ({
+        analyzerMode: 'static',
+        reportFilename: path.join ( __dirname, `webpack.report.${options.target}.html` ),
+        openAnalyzer: false,
+        logLevel: 'silent'
+      })
+    ],
+    optimization: {
+      minimizer: [
+        new TerserPlugin ({
+          parallel: true,
+          sourceMap: true,
+          terserOptions: {
+            keep_fnames: true
+          }
+        })
+      ]
+    }
+  };
+
+}
+
+/* EXPORT */
+
+module.exports = base;
diff --git a/webpack.js b/webpack.js
diff --git a/webpack.main.js b/webpack.main.js
@@ -0,0 +1,12 @@
+
+/* IMPORT */
+
+const base = require ( './webpack.base' );
+
+/* CONFIG */
+
+const config = base ({ target: 'main' });
+
+/* EXPORT */
+
+module.exports = config;
diff --git a/webpack.renderer.js b/webpack.renderer.js
@@ -0,0 +1,12 @@
+
+/* IMPORT */
+
+const base = require ( './webpack.base' );
+
+/* CONFIG */
+
+const config = base ({ target: 'renderer' });
+
+/* EXPORT */
+
+module.exports = config;