vue打包优化

首先在项目根目录新建一个vue.config.js文件

打包前必做:

module.exports = {
  publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏）
  outputDir: 'dist', // 打包后文件的目录 （默认为dist）
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
}

1、去除生产环境sourceMap

问题: 在vue项目打包之后js,css文件夹中,会自动生成一些后缀为map文件，占用相当一部分空间
// 这个里面就是后台报错的时候,准确的输出是哪一行哪一列有错

在生产环境是不需要 sourceMap 的

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

2、去除console.log打印以及注释

下载插件：

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

在vue.config.js文件添加：

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
            }
          }
        })
      )
    }
  },

3、使用CDN 加速优化

cdn优化：是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样引入的文件会大大减少，不占用首屏加载速度

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: []
  },
 // 生产环境
  build: {
    css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
    js: [
      'https://c