Optimized Webpack-Config for reduced bundle size

CHANGELOG.md

@@ -37,6 +37,8 @@
   [#393](https://github.com/nextcloud/cookbook/pull/393) @christianlupus
 - Support for dateCreated and dateModified field of schema.org Recipe
   [#377](https://github.com/nextcloud/cookbook/pull/366/) @seyfeb
+- Bundle-Analyzer and Optimization
+  [#403](https://github.com/nextcloud/cookbook/pull/403) @thembeat
 
 ### Changed
 - Switch of project ownership to neextcloud organization in GitHub

package.json

@@ -33,13 +33,17 @@
     "babel-loader": "^8.1.0",
     "css-loader": "^3.5.2",
     "file-loader": "^6.0.0",
+    "lodash-webpack-plugin": "^0.11.5",
+    "svg-inline-loader": "^0.8.2",
     "url-loader": "^4.1.0",
     "vue-loader": "^15.9.1",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "vue-template-loader": "^1.1.0",
     "webpack": "^4.42.1",
+    "webpack-bundle-analyzer": "^4.1.0",
     "webpack-cli": "^3.3.11",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^4.2.2",
+    "compression-webpack-plugin": "^6.1.1"
   }
 }

webpack.build.js

@@ -1,7 +1,39 @@
 const merge = require('webpack-merge')
 const common = require('./webpack.config.js')
+const TerserPlugIn = require('terser-webpack-plugin')
+const CompressionPlugin = require('compression-webpack-plugin')
 
 module.exports = merge(common, {
     mode: 'production',
     devtool: 'source-map',
+    optimization: {
+            minimizer: [
+                new TerserPlugIn({
+                    terserOptions:{	
+                        //sideEffects: false,
+                        // All files have side effects, and none can be tree-shaken
+                        // {
+                        //   "./src/file2.js"
+                        //  ]
+                        // }
+                        output:{
+                            comments: false
+                        }
+                    },
+                    sourceMap: true
+                })
+            ],
+        },
+        plugins: [
+            new CompressionPlugin({
+                test: /\.js(\?.*)?$/i,
+            }),
+        ],
+        performance: {
+            hints: "warning",
+            // Calculates sizes of gziped bundles.
+            assetFilter: function (assetFilename) {
+                return assetFilename.endsWith(".js.gz");
+            },
+        }
 })

webpack.config.js

@@ -6,6 +6,7 @@
  */
 const path = require('path')
 const { VueLoaderPlugin } = require('vue-loader')
+var LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 
 module.exports = {
 
@@ -45,15 +46,22 @@ module.exports = {
                 },
             },
             {
-                test: /\.(eot|woff|woff2|ttf|svg)$/,
+                test: /\.(eot|woff|woff2|ttf)$/,
                 loaders: 'file-loader',
                 options: {
                     name: '[path][name].[ext]?[hash]'
                 },
             },
+            {
+                test: /\.svg$/,
+                loader: 'svg-inline-loader'
+            },
         ],
     },
-    plugins: [new VueLoaderPlugin()],
+    plugins: [
+        new VueLoaderPlugin(),
+        new LodashModuleReplacementPlugin
+    ],
     resolve: {
         extensions: ['*', '.js', '.vue', '.json'],
         modules: [

webpack.devel.js

@@ -1,7 +1,15 @@
 const merge = require('webpack-merge')
 const common = require('./webpack.config.js')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 module.exports = merge(common, {
     mode: 'development',
     devtool: 'inline-cheap-source-map',
+    plugins: [
+        new BundleAnalyzerPlugin(
+            {
+                openAnalyzer: false,
+            }
+        )
+    ],
 })