Adds Webpack bundle analyzer for development build chacking bundle sizes. Imports only debounce from lodash on Gutenberg dynamic items block to reduce bundle size.

.gitignore

@@ -19,6 +19,7 @@ last-package-build.md5
 src/admin/scss/.sass-cache
 src/assets/css/tainacan-admin.css
 src/assets/css/tainacan-admin.css.map
+src/assets/report.html
 cypress/videos
 cypress/screenshots
 .vscode

package.json

@@ -46,6 +46,7 @@
     "vue-loader": "^15.4.2",
     "vue-template-compiler": "^2.5.17",
     "webpack": "^4.22.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": ">=3.1.11"
   }

src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue

@@ -212,7 +212,7 @@
 <script>
 import axios from 'axios';
 import qs from 'qs';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce.js';
 
 export default {
     name: "DynamicItemsListTheme",

webpack.config.js

@@ -1,6 +1,7 @@
 let path = require('path');
 let webpack = require('webpack');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
     entry: {
@@ -38,7 +39,7 @@ module.exports = {
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
-                exclude: /node_modules/,
+                exclude: /node_modules/
             },
             {
                 test: /\.(png|jpg|jpeg|gif|eot|ttf|otf|woff|woff2|svg|svgz)(\?.+)?$/,
@@ -113,7 +114,7 @@ if (production === true) {
     module.exports.resolve = {
         alias: {
             'vue$': 'vue/dist/vue.min',
-            'swiper$': 'swiper/dist/js/swiper.js'
+            'swiper$': 'swiper/dist/js/swiper.min.js'
         }
     }
 } else {
@@ -128,12 +129,17 @@ if (production === true) {
             },
         }),
         new VueLoaderPlugin(),
+        new BundleAnalyzerPlugin({
+            openAnalyzer: false,
+            analyzerMode: 'static'
+        })
     ];
 
     module.exports.resolve = {
         alias: {
             //'vue$': 'vue/dist/vue.esm' // uncomment this and comment the above to use vue dev tools (can cause type error)
-            'vue$': 'vue/dist/vue.min'
+            'vue$': 'vue/dist/vue.min',
+            'swiper$': 'swiper/dist/js/swiper.min.js'
         }
     }
 }