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 => {