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 d22d1c2..652e756 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "vue-i18n": "^8.18.2", "vue-router": "^3.3.4", "vuedraggable": "^2.23.2", - "vuex": "^3.4.0" + "vuex": "^3.4.0", + "nprogress": "^0.2.0" }, "devDependencies": { "@ant-design/colors": "^4.0.1", @@ -50,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/public/index.html b/public/index.html index 61725f6..719a471 100644 --- a/public/index.html +++ b/public/index.html @@ -6,12 +6,20 @@ <%= htmlWebpackPlugin.options.title %> + + <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> + + <% } %>
+ + <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> + + <% } %> diff --git a/src/layouts/header/HeaderSearch.vue b/src/layouts/header/HeaderSearch.vue index ec4f116..dcc9fc1 100644 --- a/src/layouts/header/HeaderSearch.vue +++ b/src/layouts/header/HeaderSearch.vue @@ -3,6 +3,7 @@ { + // start progress bar + if (!NProgress.isStarted()) { + NProgress.start() + } + next() +} /** * 登录守卫 @@ -33,6 +50,7 @@ const authorityGuard = (to, from, next, options) => { if (!hasAuthority(to, permissions, roles)) { message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`) next({path: '/403'}) + NProgress.done() } else { next() } @@ -61,7 +79,18 @@ const redirectGuard = (to, from, next, options) => { next() } +/** + * 进度条结束 + * @param to + * @param form + * @param options + */ +const progressDone = () => { + // finish progress bar + NProgress.done() +} + export default { - beforeEach: [loginGuard, authorityGuard, redirectGuard], - afterEach: [] + beforeEach: [progressStart, loginGuard, authorityGuard, redirectGuard], + afterEach: [progressDone] } diff --git a/src/theme/default/index.less b/src/theme/default/index.less index 2c13c4e..8eacd52 100644 --- a/src/theme/default/index.less +++ b/src/theme/default/index.less @@ -1,2 +1,3 @@ @import "color"; @import "style"; +@import "nprogress"; diff --git a/src/theme/default/nprogress.less b/src/theme/default/nprogress.less new file mode 100644 index 0000000..06e79c6 --- /dev/null +++ b/src/theme/default/nprogress.less @@ -0,0 +1,76 @@ +@import '~ant-design-vue/lib/style/themes/default'; + +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: @primary-color; + + position: fixed; + z-index: 1031; + top: 0; + left: 0; + + width: 100%; + height: 2px; +} + +/* Fancy blur effect */ +#nprogress .peg { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color; + opacity: 1.0; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); +} + +/* Remove these to get rid of the spinner */ +#nprogress .spinner { + display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; +} + +#nprogress .spinner-icon { + width: 18px; + height: 18px; + box-sizing: border-box; + + border: solid 2px transparent; + border-top-color: @primary-color; + border-left-color: @primary-color; + border-radius: 50%; + + -webkit-animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; +} + +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} + +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} + +@-webkit-keyframes nprogress-spinner { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} +@keyframes nprogress-spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + diff --git a/vue.config.js b/vue.config.js index 8277792..ba70c7d 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,7 +1,39 @@ 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 = { + // webpack build externals + externals: { + vue: 'Vue', + 'vue-router': 'VueRouter', + vuex: 'Vuex', + axios: 'axios', + nprogress: 'NProgress', + clipboard: 'ClipboardJS', + '@antv/data-set': 'DataSet', + 'js-cookie': 'Cookies' + }, + css: [ + ], + js: [ + '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', + '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js', + '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js', + '//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/js-cookie@2.2.1/src/js.cookie.min.js' + ] +} + module.exports = { devServer: { // proxy: { @@ -22,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', @@ -30,16 +65,40 @@ module.exports = { resolveCss }) ) + // 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 项，因为此项优化与主题色替换功能冲突 - if (process.env.NODE_ENV === 'production') { + if (isProd) { config.plugin('optimize-css') .tap(args => { args[0].cssnanoOptions.preset[1].colormin = false return args }) } + // 生产环境下使用CDN + if (isProd) { + config.plugin('html') + .tap(args => { + args[0].cdn = assetsCDN + return args + }) + } }, css: { loaderOptions: { @@ -51,7 +110,7 @@ module.exports = { } } }, - publicPath: process.env.NODE_ENV === 'production' ? '/vue-antd-admin/' : '/', + publicPath: isProd ? '/vue-antd-admin/' : '/', outputDir: 'dist', assetsDir: 'static', productionSourceMap: false