vue-cli3打包优化

vue项目打包是需要做一些性能优化的，这篇文章里我写了关于我知道的要做的优化的部分，仅供参考。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
// 开启Gzip需要的依赖 yarn add compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve(dir) {
   
    return path.join(__dirname, dir)
}
// 标记是否是生产环境
const isPruction = process.env.NODE_ENV === "production" 
const devNeedCdn = false // 标记本地是否需要cdn引入
// cdn配置
// CDN的本质上是将媒体资源，动静态图片（Flash），HTML，CSS，JS等等内容缓存到距离你更近的IDC，
// 从而让用户进行共享资源，实现缩减站点间的响应时间等等需求，而网游加速器的本质则是通过建立高带宽机房，
// 架设多节点服务器来为用户进行加速。我们可以将一些大体积的模块，让cdn帮我们提供相应的资源，
// 这样就可以缓解我们自己的服务器的压力，同时提供更快更好的资源响应

const cdn = {
   
    // 模块名称和作用域名（对应的是window里面的全局变量名）
    external: {
   
        vuex: 'Vuex',
        'vue-router': 'VueRouter'
    },
    //cdn的css链接
    css: [],
    //cdn的js连接 这里的资源地址请根据自己的连接
    js: [
        'https://cdn.staticfile.org/vuex/3.0.2/vuex.min.js', 
        'https://cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js'
    ]
}
module.exports = {
   
    // devServer : {
   
    //     proxy: 'localhost:8080'
    // },
    productionSourceMap: false, // 上线后不生成map文件
    chainWebpack: (config) => {
   
        // 配置路径别名
        config.resolve.alias
        .set('@', resolve('src'))
        .set('components'