perf: add VUE_APP_BROTLI option for brotli compression

.env

@@ -11,6 +11,7 @@ VUE_APP_CDN_DEPENDENCIES=on
 
 # on | off
 VUE_APP_GZIP=on
+VUE_APP_BROTLI=on
 
 VUE_APP_I18N_LOCALE=zh-CN
 VUE_APP_I18N_FALLBACK_LOCALE=en

package.json

@@ -100,6 +100,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "1.0.0-beta.31",
     "babel-eslint": "^10.1.0",
+    "check-node-version": "^4.0.2",
     "compression-webpack-plugin": "^3.1.0",
     "cz-conventional-changelog": "3.1.0",
     "eslint": "^6.8.0",

vue.config.js

@@ -1,6 +1,7 @@
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const VueFilenameInjector = require('@d2-projects/vue-filename-injector')
 const { get, set, reduce, chain, each } = require('lodash')
+const check = require('check-node-version')
 const packageInfo = require('./package.json')
 
 // ! Multi-page config here. must be undefind or object
@@ -40,21 +41,44 @@ module.exports = {
     }
 
     /**
-     * for gzip outputs
+     * compress assets
      * https://github.com/webpack-contrib/compression-webpack-plugin
      */
-    if (process.env.VUE_APP_GZIP === 'on') {
-      config
-        .plugin('compression-webpack-plugin')
-        .use(CompressionWebpackPlugin, [
-          {
-            filename: '[path].gz[query]',
-            algorithm: 'gzip',
-            test: /\.js$|\.css$|\.html$/,
-            threshold: 10240,
-            minRatio: 0.8,
+    if (process.env.NODE_ENV !== 'development') {
+      const multipleCompression = []
+      if (process.env.VUE_APP_GZIP === 'on') {
+        multipleCompression.push({
+          filename: '[path].gz[query]',
+          algorithm: 'gzip',
+          test: /\.js$|\.css$|\.html$/,
+          threshold: 10240,
+          minRatio: 0.8
+        })
+      }
+      if (process.env.VUE_APP_BROTLI === 'on') {
+        /**
+         * https://github.com/webpack-contrib/compression-webpack-plugin#using-brotli
+         */
+        check({ node: '>= 11.7.0' }, (error, result) => {
+          if (result.isSatisfied) {
+            multipleCompression.push({
+              filename: '[path].br[query]',
+              algorithm: 'brotliCompress',
+              test: /\.(js|css|html|svg)$/,
+              compressionOptions: { level: 11 },
+              threshold: 10240,
+              minRatio: 0.8
+            })
+          } else {
+            console.error('Node version need >= 11.7.0 for brotli compress')
           }
-        ])
+        })
+      }
+      if (multipleCompression.length) {
+        config
+          .plugin('compression-webpack-plugin')
+          .use(CompressionWebpackPlugin, multipleCompression)
+      }
     }
 
     /**

yarn.lock

@@ -2657,6 +2657,18 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+check-node-version@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/check-node-version/-/check-node-version-4.0.2.tgz#0385880c42425651ce4aaee8de8008e4a640f5dc"
+  integrity sha512-PsIRqtX9i4oWuScZrBf7I3fDfGfo8aS5uU7F1jJ771X0lNwW6hd+SYgIfs9w8Cw9mY4bF2QlU8ZZ1KdYdCobFA==
+  dependencies:
+    chalk "^3.0.0"
+    map-values "^1.0.1"
+    minimist "^1.2.0"
+    object-filter "^1.0.2"
+    run-parallel "^1.1.4"
+    semver "^6.3.0"
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@@ -6729,6 +6741,11 @@ map-cache@^0.2.2:
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
   integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
+map-values@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-values/-/map-values-1.0.1.tgz#768b8e79c009bf2b64fee806e22a7b1c4190c990"
+  integrity sha1-douOecAJvytk/ugG4ip7HEGQyZA=
+
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -7291,6 +7308,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-filter@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/object-filter/-/object-filter-1.0.2.tgz#af0b797ffebeaf8a52c6637cedbe8816cfec1bc8"
+  integrity sha1-rwt5f/6+r4pSxmN87b6IFs/sG8g=
+
 object-hash@^1.1.4:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
@@ -8772,6 +8794,11 @@ run-async@^2.2.0:
   dependencies:
     is-promise "^2.1.0"
 
+run-parallel@^1.1.4:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
+  integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
+
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"