optimize production environment packaging

babel.config.js

@@ -1,5 +1,13 @@
+const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
+
+const plugins = []
+if (IS_PROD) {
+  plugins.push('transform-remove-console')
+}
+
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+  plugins
 }

package.json

@@ -51,7 +51,9 @@
     "vue-template-compiler": "^2.6.11",
     "vuepress": "^1.5.2",
     "webpack-theme-color-replacer": "^1.3.12",
-    "whatwg-fetch": "^3.0.0"
+    "whatwg-fetch": "^3.0.0",
+    "compression-webpack-plugin": "^2.0.0",
+    "babel-plugin-transform-remove-console": "^6.9.4"
   },
   "eslintConfig": {
     "root": true,

vue.config.js

@@ -1,8 +1,11 @@
 let path = require('path')
+const webpack = require('webpack')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
 const {getThemeColors, modifyVars} = require('./src/utils/themeUtil')
 const {resolveCss} = require('./src/utils/theme-color-replacer-extend')
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
 
+const productionGzipExtensions = ['js', 'css']
 const isProd = process.env.NODE_ENV === 'production'
 
 const assetsCDN = {
@@ -14,7 +17,8 @@ const assetsCDN = {
     axios: 'axios',
     nprogress: 'NProgress',
     clipboard: 'ClipboardJS',
-    '@antv/data-set': 'DataSet'
+    '@antv/data-set': 'DataSet',
+    'js-cookie': 'Cookies'
   },
   css: [
   ],
@@ -25,7 +29,8 @@ const assetsCDN = {
     '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
     '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
     '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
-    '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js'
+    '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
+    '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js'
   ]
 }
 
@@ -49,6 +54,9 @@ module.exports = {
   },
   configureWebpack: config => {
     config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];
+    config.performance = {
+      hints: false
+    }
     config.plugins.push(
       new ThemeColorReplacer({
         fileName: 'css/theme-colors-[contenthash:8].css',
@@ -57,7 +65,22 @@ module.exports = {
         resolveCss
       })
     )
-    config.externals = isProd ? assetsCDN.externals : {}
+    // Ignore all locale files of moment.js
+    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
+    // 生产环境下将资源压缩成gzip格式
+    if (isProd) {
+      // add `CompressionWebpack` plugin to webpack plugins
+      config.plugins.push(new CompressionWebpackPlugin({
+        algorithm: 'gzip',
+        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+        threshold: 10240,
+        minRatio: 0.8
+      }))
+    }
+    // if prod, add externals
+    if (isProd) {
+      config.externals = assetsCDN.externals
+    }
   },
   chainWebpack: config => {
     // 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突
@@ -68,11 +91,7 @@ module.exports = {
           return args
         })
     }
-    config.plugin('html')
-      .tap(args => {
-        args[0].title = 'Vue Antd Admin'
-      return args
-    })
+    // 生产环境下使用CDN
     if (isProd) {
       config.plugin('html')
         .tap(args => {