vue项目vue.config.js文件打包 配置、优化配置

const Timestamp = new Date().getTime()
// 压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// const { registerPreprocessor } = require('echarts/lib/echarts')
// 自定义配置插件
const TerserPlugin = require('terser-webpack-plugin')

process.env.VUE_APP_Version = 'v20200516'
module.exports = {
  // 配置打包路径
  publicPath: process.env.NODE_ENV === 'production' ? ('/' + process.env.VUE_APP_NAME) : '/',
  outputDir: process.env.VUE_APP_NAME,
  productionSourceMap: false,

  chainWebpack: (config) => {
    // ============压缩图片 start============
    if (process.env.NODE_ENV === 'production') {
      // config.module
      //   .rule('images')
      //   .use('image-webpack-loader')
      //   .loader('image-webpack-loader')
      //   .options({ bypassOnDebug: true })
      //   .end()
      // ============压缩图片 end============
      config.plugins.delete('prefetch') // vue-cli3.0   加上这行才能按需加载  移除 prefetch 插件
      // 移除 preload 插件
      config.plugins.delete('preload')
      // 压缩代码
      config.optimization.minimize(true)
      // 分割代码
      config.optimization.splitChunks({
        chunks: 'initial', // async异步代码分割 initial同步代码分割 all同步异步分割都开启
        minSize: 30000, // 字节 引入的文件大于30kb才进行分割
        // maxSize: 50000,         //50kb，尝试将大于50kb的文件拆分成n个50kb的文件
        minChunks: 1, // 模块至少使用次数
        maxAsyncRequests: 5, // 同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
        maxInitialRequests: 3, // 首页加载的时候引入的文件最多3个
        automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符
        name: true, // 缓存组里面的filename生效，覆盖默认命名
        cacheGroups: { // 缓存组，将所有加载模块放在缓存里面一起分割打包
          vendors: { // 自定义打包模块
            test: /[\\/]node_modules[\\/]/,
            priority: -10, // 优先级，先打包到哪个组里面，值越大，优先级越高
            filename: 'vendors.js'
          },
          default: { // 默认打包模块
            priority: -20,
            reuseExistingChunk: true, // 模块嵌套引入时，判断是否复用已经被打包的模块
            filename: 'common.js'
          }
        }
      })
    }
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // webpack 配置
      config.plugins.push(
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.map$|\.css$/,
          // 超过4kb压缩
          threshold: 4096
        })
      )
      config.plugins.push(
        new TerserPlugin({
          terserOptions: {
            // 自动删除console
            compress: {
              // warnings: false, // 若打包错误，则注释这行
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ['console.log']
            }
          },
          cache: true,
          sourceMap: false,
          parallel: true
        })
      )
      config.output.filename = `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
      config.output.chunkFilename = `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
    } else {
      config.devtool = 'source-map'
    }
  },
  lintOnSave: false,
  devServer: {
    proxy: {
           // 代理域名
    '/api': {
       target: 'https://v1.eleadmin.com/api',
       changeOrigin: true,
       pathRewrite: {
          '^/api': ''
        }
      },
    }
  }
}