Switch to uglifyjs for speed improvement, leverage caching

Author: DaneEveritt

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env",
-    "minify"
+    "@babel/preset-env"
   ],
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread"

package.json

@@ -14,12 +14,9 @@
         "axios": "^0.18.0",
         "babel-cli": "6.18.0",
         "babel-loader": "^8.0.0-beta",
-        "babel-minify": "^0.4.3",
-        "babel-minify-webpack-plugin": "^0.3.1",
         "babel-plugin-transform-object-assign": "^6.22.0",
         "babel-plugin-transform-runtime": "^6.23.0",
         "babel-plugin-transform-strict-mode": "^6.18.0",
-        "babel-preset-minify": "^0.4.3",
         "babel-register": "^6.26.0",
         "clean-webpack-plugin": "^0.1.19",
         "css-loader": "^0.28.11",
@@ -36,6 +33,7 @@
         "purgecss-webpack-plugin": "^1.1.0",
         "style-loader": "^0.21.0",
         "tailwindcss": "^0.5.1",
+        "uglifyjs-webpack-plugin": "^1.2.5",
         "vue-devtools": "^3.1.9",
         "vue-feather-icons": "^4.7.1",
         "vue-loader": "^14.2.2",
@@ -52,8 +50,8 @@
     },
     "scripts": {
         "build:filemanager": "./node_modules/babel-cli/bin/babel.js public/themes/pterodactyl/js/frontend/files/src --source-maps --out-file public/themes/pterodactyl/js/frontend/files/filemanager.min.js",
-        "watch": "APP_ENV=development ./node_modules/.bin/webpack --watch",
-        "build": "APP_ENV=development ./node_modules/.bin/webpack",
-        "build:release": "APP_ENV=production ./node_modules/.bin/webpack"
+        "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
+        "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
+        "build:release": "NODE_ENV=production ./node_modules/.bin/webpack"
     }
 }

webpack.config.js

@@ -6,22 +6,65 @@ const AssetsManifestPlugin = require('webpack-assets-manifest');
 const CleanPlugin = require('clean-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ShellPlugin = require('webpack-shell-plugin');
-const MinifyPlugin = require('babel-minify-webpack-plugin');
 const PurgeCssPlugin = require('purgecss-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 // Custom PurgeCSS extractor for Tailwind that allows special characters in
 // class names.
 //
 // https://github.com/FullHuman/purgecss#extractor
 class TailwindExtractor {
-    static extract(content) {
+    static extract (content) {
         return content.match(/[A-z0-9-:\/]+/g) || [];
     }
 }
 
+const basePlugins = [
+    new CleanPlugin(path.resolve(__dirname, 'public/assets')),
+    new ShellPlugin({
+        onBuildStart: [
+            'php artisan vue-i18n:generate',
+            'php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js',
+        ],
+    }),
+    new ExtractTextPlugin('bundle-[chunkhash].css', {
+        allChunks: true,
+    }),
+    new AssetsManifestPlugin({
+        writeToDisk: true,
+        publicPath: true,
+        integrity: true,
+        integrityHashes: ['sha384'],
+    }),
+];
+
+const productionPlugins = [
+    new PurgeCssPlugin({
+        paths: glob.sync([
+            path.join(__dirname, 'resources/assets/scripts/**/*.vue'),
+            path.join(__dirname, 'resources/themes/pterodactyl/**/*.blade.php'),
+        ]),
+        extractors: [
+            {
+                extractor: TailwindExtractor,
+                extensions: ['html', 'js', 'php', 'vue'],
+            }
+        ],
+    }),
+    new UglifyJsPlugin({
+        include: [
+            path.join(__dirname, 'resources/assets/scripts'),
+            path.join(__dirname, 'node_modules'),
+            path.join(__dirname, 'vendor/tightenco'),
+        ],
+        cache: true,
+        parallel: 2,
+    }),
+];
+
 module.exports = {
-    mode: process.env.APP_ENV,
-    devtool: 'source-map',
+    mode: process.env.NODE_ENV,
+    devtool: process.env.NODE_ENV === 'production' ? false : 'eval-source-map',
     performance: {
         hints: false,
     },
@@ -38,21 +81,13 @@ module.exports = {
             {
                 test: /\.vue$/,
                 loader: 'vue-loader',
-                options: {
-                    postcss: [
-                        require('postcss-import'),
-                        require('postcss-preset-env')({stage: 0}),
-                        tailwind('./tailwind.js'),
-                        require('autoprefixer'),
-                    ]
-                }
             },
             {
                 test: /\.js$/,
                 include: [
                     path.resolve(__dirname, 'resources'),
                 ],
-                loader: 'babel-loader',
+                loader: 'babel-loader?cacheDirectory',
             },
             {
                 test: /\.css$/,
@@ -73,7 +108,7 @@ module.exports = {
                             ident: 'postcss',
                             plugins: [
                                 require('postcss-import'),
-                                require('tailwindcss')('./tailwind.js'),
+                                tailwind('./tailwind.js'),
                                 require('postcss-preset-env')({stage: 0}),
                                 require('autoprefixer'),
                             ]
@@ -87,44 +122,8 @@ module.exports = {
         alias: {
             'vue$': 'vue/dist/vue.esm.js'
         },
-        extensions: ['*', '.js', '.vue', '.json']
+        extensions: ['.js', '.vue', '.json'],
+        symlinks: false,
     },
-    plugins: [
-        new PurgeCssPlugin({
-            paths: glob.sync([
-                path.join(__dirname, 'resources/assets/scripts/**/*.vue'),
-                path.join(__dirname, 'resources/themes/pterodactyl/**/*.blade.php'),
-            ]),
-            extractors: [
-                {
-                    extractor: TailwindExtractor,
-                    extensions: ['html', 'js', 'php', 'vue'],
-                }
-            ],
-        }),
-        new CleanPlugin(path.resolve(__dirname, 'public/assets')),
-        new ShellPlugin({
-            onBuildStart: [
-                'php artisan vue-i18n:generate',
-                'php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js',
-            ],
-        }),
-        new ExtractTextPlugin('bundle-[chunkhash].css', {
-            allChunks: true,
-        }),
-        new MinifyPlugin({
-            mangle: {topLevel: true},
-        }, {
-            include: [
-                path.resolve(__dirname, 'resources'),
-                path.resolve(__dirname, 'node_modules'),
-            ],
-        }),
-        new AssetsManifestPlugin({
-            writeToDisk: true,
-            publicPath: true,
-            integrity: true,
-            integrityHashes: ['sha384'],
-        }),
-    ]
+    plugins: process.env.NODE_ENV === 'production' ? basePlugins.concat(productionPlugins) : basePlugins,
 };