Merge pull request #26 from YIO-Remote/feature/optimise-build-size

Bundle Size Optimisation
YIO-Remote · May 9, 2020 · 3a242d8 · 3a242d8
2 parents a58ab7d + 353c8b6
commit 3a242d8
Show file tree

Hide file tree

Showing 15 changed files with 2,754 additions and 2,198 deletions.
diff --git a/.config/webpack.config.analyse.js b/.config/webpack.config.analyse.js
@@ -0,0 +1,11 @@
+const merge = require('webpack-merge');
+const production = require('./webpack.config.prod');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = merge(production, {
+    plugins: [
+        new BundleAnalyzerPlugin({
+            analyzerMode: 'server'
+        })
+    ]
+});
diff --git a/.config/webpack.config.common.js b/.config/webpack.config.common.js
@@ -37,7 +37,8 @@ module.exports = {
     plugins: [
         new VueLoaderPlugin(),
         new HtmlWebpackPlugin({
-            template: 'index.html'
+            template: 'index.html',
+            favicon: '../assets/images/favicon-32.png'
         }),
         new webpack.DefinePlugin({
             'process.env.__VERSION__': JSON.stringify(pkg.version)

diff --git a/.config/webpack.config.prod.js b/.config/webpack.config.prod.js
@@ -1,10 +1,17 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 const common = require('./webpack.config.common');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = merge(common, {
     mode: 'production',
-    devtool: 'source-map',
+    devtool: false,
+    optimization: {
+        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+    },
     module: {
         rules: [
             {
@@ -25,8 +32,10 @@ module.exports = merge(common, {
         ]
     },
     plugins: [
+        new CompressionPlugin(),
+        new webpack.optimize.ModuleConcatenationPlugin(),
         new MiniCssExtractPlugin({
             filename: 'style.css'
         })
-      ]
+    ]
 });
diff --git a/assets/images/favicon-32.png b/assets/images/favicon-32.png
diff --git a/assets/styles/fonts.scss b/assets/styles/fonts.scss
@@ -18,8 +18,8 @@
 @font-face {
   font-family: '#{$icomoon-font-family}';
   src:
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?6y2exq') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?6y2exq') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?6y2exq') format('woff'),	
     url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?6y2exq##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;