optimize production environment packaging

guoranred

2020-09-22 dcf65935e13cc3db417597affde3028d88bed4e2

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 @@
    axios: 'axios',
    nprogress: 'NProgress',
    clipboard: 'ClipboardJS',
    '@antv/data-set': 'DataSet'
    '@antv/data-set': 'DataSet',
    'js-cookie': 'Cookies'
  },
  css: [
  ],
@@ -25,7 +29,8 @@
    '//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 @@
  },
  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 @@
        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 @@
          return args
        })
    }
    config.plugin('html')
      .tap(args => {
        args[0].title = 'Vue Antd Admin'
      return args
    })
    // 生产环境下使用CDN
    if (isProd) {
      config.plugin('html')
        .tap(args => {