vue项目打包优化

打包优化目的

1、项目启动速度，和性能
2、必要的清理数据
3、减少打包后的体积

一、去除.map文件

在根目录新建vue.config.js文件

module.exports = {
   
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

二、开启CDN加速

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

// 本地环境是否需要使用cdn
const devNeedCdn = false

// cdn链接
const cdn = {
   
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: {
   
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css链接
    css: [
       'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
       'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css',
    ],
    // cdn的js链接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}

module.exports = {
   
    chainWebpack: config => {
   
        // ============注入cdn start============
        config.plugin('html').tap(args => {
   
            // 生产环境或本地需要cdn时，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============
    },
    configureWebpack: config =>