chore: Add bundle analyzer to local-sandbox (#2322)

* chore: Add bundle analyzer to local-sandbox * add bundle analyzer * readme Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
microsoft · Feb 5, 2020 · db4661e · db4661e
1 parent c501557
commit db4661e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/build/package.json b/build/package.json
@@ -78,7 +78,7 @@
     "tmp": "^0.0.33",
     "tsconfig-paths": "^3.7.0",
     "webpack": "^4.35.0",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-hot-middleware": "^2.24.3"
   },

diff --git a/packages/local-sandbox/README.md b/packages/local-sandbox/README.md
@@ -11,3 +11,6 @@ yarn build:production
 yarn serve
 ```  
 
+## Measuring bundle size
+
+This package can be also used to analyze bundle size. After running `yarn build:production`, bundle size report is stored to **dist/report.html**. 
diff --git a/packages/local-sandbox/package.json b/packages/local-sandbox/package.json
@@ -17,11 +17,13 @@
   "devDependencies": {
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^4.5.2",
+    "express": "^4.15.4",
     "fork-ts-checker-webpack-plugin": "^1.3.3",
+    "terser-webpack-plugin": "^1.4.3",
     "typescript": "~3.7.2",
     "webpack": "^4.35.0",
-    "webpack-cli": "^3.3.10",
-    "express": "^4.15.4"
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.10"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/local-sandbox/webpack.config.ts b/packages/local-sandbox/webpack.config.ts
@@ -1,7 +1,9 @@
 import * as webpack from 'webpack'
 
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
 
 const webpackConfig: webpack.Configuration = {
   name: 'client',
@@ -13,7 +15,7 @@ const webpackConfig: webpack.Configuration = {
   output: {
     filename: `[name].js`,
   },
-  devtool: 'eval-source-map',
+  devtool: 'source-map',
   module: {
     rules: [
       {
@@ -33,6 +35,10 @@ const webpackConfig: webpack.Configuration = {
         from: 'public/index.html',
       },
     ]),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+    }),
   ],
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
@@ -41,7 +47,21 @@ const webpackConfig: webpack.Configuration = {
     hints: false, // to (temporarily) disable "WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit")
   },
   optimization: {
-    minimize: false,
+    minimizer: [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true,
+        terserOptions: {
+          // https://github.com/terser/terser
+          mangle: false,
+          output: {
+            beautify: true,
+            comments: true,
+          },
+        },
+      }),
+    ],
   },
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -20494,10 +20494,10 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webpack-bundle-analyzer@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.2.tgz#3da733a900f515914e729fcebcd4c40dde71fc6f"
-  integrity sha512-7qvJLPKB4rRWZGjVp5U1KEjwutbDHSKboAl0IfafnrdXMrgC0tOtZbQD6Rw0u4cmpgRN4O02Fc0t8eAT+FgGzA==
+webpack-bundle-analyzer@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz#39b3a8f829ca044682bc6f9e011c95deb554aefd"
+  integrity sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==
   dependencies:
     acorn "^6.0.7"
     acorn-walk "^6.1.1"
@@ -20508,7 +20508,7 @@ webpack-bundle-analyzer@^3.3.2:
     express "^4.16.3"
     filesize "^3.6.1"
     gzip-size "^5.0.0"
-    lodash "^4.17.10"
+    lodash "^4.17.15"
     mkdirp "^0.5.1"
     opener "^1.5.1"
     ws "^6.0.0"