added purge unused css

mubaidr · Feb 15, 2019 · a297d59 · a297d59
1 parent de3baa5
commit a297d59
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 36 deletions.
diff --git a/_scripts/webpack.main.config.js b/_scripts/webpack.main.config.js
@@ -1,9 +1,11 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 const path = require('path')
 const { dependencies } = require('../package.json')
 
-const mainConfig = {
+const isDevMode = process.env.NODE_ENV === 'development'
+
+const config = {
   mode: process.env.NODE_ENV,
   entry: {
     main: path.join(__dirname, '../src/main/index.js'),
@@ -29,8 +31,8 @@ const mainConfig = {
     ],
   },
   node: {
-    __dirname: process.env.NODE_ENV !== 'production',
-    __filename: process.env.NODE_ENV !== 'production',
+    __dirname: isDevMode,
+    __filename: isDevMode,
   },
   output: {
     filename: '[name].js',
@@ -43,4 +45,4 @@ const mainConfig = {
   target: 'electron-main',
 }
 
-module.exports = mainConfig
+module.exports = config
diff --git a/_scripts/webpack.renderer.config.js b/_scripts/webpack.renderer.config.js
@@ -1,17 +1,23 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
 const path = require('path')
 
 /* eslint-disable*/
+const fg = require('fast-glob')
 const webpack = require('webpack')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
+// const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const PurgecssPlugin = require('purgecss-webpack-plugin')
 // const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const { dependencies } = require('../package.json')
 /* eslint-enable */
 
+const isDevMode = process.env.NODE_ENV === 'development'
+
 /**
  * List of node_modules to include in webpack bundle
  *
@@ -21,7 +27,7 @@ const { dependencies } = require('../package.json')
  */
 const whiteListedModules = ['vue']
 
-const rendererConfig = {
+const config = {
   mode: process.env.NODE_ENV,
   entry: {
     renderer: path.join(__dirname, '../src/renderer/main.js'),
@@ -30,7 +36,6 @@ const rendererConfig = {
     libraryTarget: 'commonjs2',
     path: path.join(__dirname, '../dist'),
     pathinfo: false,
-    publicPath: '/',
     filename: '[name].js',
   },
   externals: [
@@ -42,19 +47,34 @@ const rendererConfig = {
     rules: [
       {
         test: /\.scss$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+        use: [
+          isDevMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader',
+        ],
       },
       {
         test: /\.sass$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'],
+        use: [
+          isDevMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader?indentedSyntax',
+        ],
       },
       {
         test: /\.less$/,
-        use: ['vue-style-loader', 'css-loader', 'less-loader'],
+        use: [
+          isDevMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'less-loader',
+        ],
       },
       {
         test: /\.css$/,
-        use: ['vue-style-loader', 'css-loader'],
+        use: [
+          isDevMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
       },
       {
         test: /\.html$/,
@@ -80,7 +100,7 @@ const rendererConfig = {
         use: {
           loader: 'vue-loader',
           options: {
-            extractCSS: process.env.NODE_ENV === 'production',
+            extractCSS: !isDevMode,
             loaders: {
               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
               scss: 'vue-style-loader!css-loader!sass-loader',
@@ -90,7 +110,7 @@ const rendererConfig = {
         },
       },
       {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif|tiff|bmp|webp|svg)(\?.*)?$/,
         use: {
           loader: 'url-loader',
           query: {
@@ -120,26 +140,19 @@ const rendererConfig = {
     ],
   },
   node: {
-    __dirname: process.env.NODE_ENV !== 'production',
-    __filename: process.env.NODE_ENV !== 'production',
+    __dirname: isDevMode,
+    __filename: isDevMode,
   },
   plugins: [
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: path.resolve(__dirname, '../src/index.ejs'),
-      nodeModules:
-        process.env.NODE_ENV !== 'production'
-          ? path.resolve(__dirname, '../node_modules')
-          : false,
+      nodeModules: isDevMode
+        ? path.resolve(__dirname, '../node_modules')
+        : false,
     }),
     new VueLoaderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
   ],
-  output: {
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
-    path: path.join(__dirname, '../dist'),
-  },
   resolve: {
     alias: {
       '@': path.join(__dirname, '../src/renderer'),
@@ -153,15 +166,30 @@ const rendererConfig = {
 /**
  * Adjust rendererConfig for production settings
  */
-if (process.env.NODE_ENV === 'production') {
-  rendererConfig.plugins.push(
-    new CopyWebpackPlugin([
-      {
-        from: path.join(__dirname, '../static'),
-        to: path.join(__dirname, '../dist/static'),
-      },
-    ])
+if (isDevMode) {
+  config.plugins.push(new webpack.HotModuleReplacementPlugin())
+} else {
+  config.plugins.push(
+    new ScriptExtHtmlWebpackPlugin({
+      async: [/runtime/],
+      defaultAttribute: 'defer',
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new PurgecssPlugin({
+      paths: fg.sync([`./src/renderer/**/*`], {
+        onlyFiles: true,
+        absolute: true,
+      }),
+    })
+    // new CopyWebpackPlugin([
+    //   {
+    //     from: path.join(__dirname, '../src/data'),
+    //     to: path.join(__dirname, '../dist/data'),
+    //   },
+    // ])
   )
 }
 
-module.exports = rendererConfig
+module.exports = config
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "devtron": "^1.4.0",
     "electron": "~4.0.5",
     "electron-builder": "^20.38.5",
+    "fast-glob": "^2.2.6",
     "electron-debug": "^2.1.0",
     "eslint": "^5.13.0",
     "eslint-config-airbnb-base": "^13.1.0",
@@ -96,10 +97,13 @@
     "inject-loader": "^4.0.1",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "node-loader": "^0.6.0",
     "node-sass": "^4.11.0",
     "prettier": "^1.16.4",
+    "purgecss-webpack-plugin": "^1.4.0",
     "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "^2.1.3",
     "style-loader": "^0.23.1",
     "tree-kill": "1.2.1",
     "url-loader": "^1.1.2",