From dcf65935e13cc3db417597affde3028d88bed4e2 Mon Sep 17 00:00:00 2001
From: guoranred <13926187239@163.com>
Date: Tue, 22 Sep 2020 22:49:24 +0800
Subject: [PATCH] optimize production environment packaging
---
babel.config.js | 10 +++++++++-
package.json | 4 +++-
vue.config.js | 35 +++++++++++++++++++++++++++--------
3 files changed, 39 insertions(+), 10 deletions(-)
diff --git a/babel.config.js b/babel.config.js
index e955840..4eb72d0 100644
--- a/babel.config.js
+++ b/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
}
diff --git a/package.json b/package.json
index 2928731..652e756 100644
--- a/package.json
+++ b/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,
diff --git a/vue.config.js b/vue.config.js
index d009ff8..ba70c7d 100644
--- a/vue.config.js
+++ b/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 => {