vue-cli4打包过程

1.在根路径下创建vue.config.js文件

2.vue.config.js文件里需要进行配置

module.exports = {
   
  publicPath:'./' , 
  productionSourceMap: false,
  devServer: {
   
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
   hotOnly: false, // 热更新

   overlay: {
   
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
    //代理转发
      //配置跨域
      '/api': {
   
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
   
          '^/api': '/'
        }
      }
    }
  }
}

3.修改静态资源的配置（在vue.config.js中）

publicPath:'./'  // 静态资源路径（默认/，打包后会白屏）

4.去除生产环境sourceMap（在vue.config.js中）

问题： vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间

sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。

map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

生产环境是不需要sourceMap的，如下配置可以去除

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

去除sourceMap前后对比，减少了很大体积。

前：dist大小为7M

后：dist大小为3M

4.去除console.log打印以及注释

下载插件

cnpm install uglifyjs-webpack-plugin --save-dev

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';

  configureWebpack: config => {
   
    const plugins = [];
    if (isProduction) {
   
      plugins.push(
        new UglifyJsPlugin({
   
          uglifyOptions: {
   
            output: {
   
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
   
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  },

结论：重新打包，dist体积减少并不大。因为congsole.log()以及注释并不会占用太多体积（也就10-30kb）

5.使用CDN 加速优化

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：

const isProduction = process.env.NODE_ENV === 'production';

// externals 排除
const externals = {
   
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios'
}
// CDN外链，会插入到index.html中
const cdn = {
   
  // 开发环境
  dev: {
   
    css: [],
    js: []
  }