devopsapp/vue.config.js

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 1. 生产环境禁用 source map，极大减少打包体积并保护源码
  productionSourceMap: false,

  lintOnSave: process.env.NODE_ENV !== 'production',

  configureWebpack: config => {
    const plugins = []

    // 2. 生产环境开启 Gzip 压缩
    if (process.env.NODE_ENV === 'production') {
      plugins.push(
          new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|css|html|svg)$/, // 匹配文件名
            threshold: 10240, // 对超过 10kb 的数据进行压缩
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
            deleteOriginalAssets: false // 是否删除原文件（通常建议保留）
          })
      )
    }

    return {
      plugins,
      resolve: {
        alias: {
          '@': resolve('src'),
          'assets': resolve('src/assets'),
          'components': resolve('src/components'),
          'network': resolve('src/network'),
          'views': resolve('src/views')
        }
      },
      // 3. 性能提示配置
      performance: {
        hints: 'warning',
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
      }
    }
  },

  chainWebpack: config => {
    // 4. 优化 Prismjs 注入 (配合 babel-plugin-prismjs 使用)
    // 确保只加载必要的语言，防止 vendor 膨胀

    // 5. swf 支持保持不变
    config.module
        .rule('swf')
        .test(/\.swf$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 10000
        })

    // 6. 移除 prefetch/preload，减少首屏不必要的流量消耗
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')

    // 7. 图片压缩 (可选，需安装 image-webpack-loader)

    // 8. 分包策略：将体积大的库单独拆出
    if (process.env.NODE_ENV === 'production') {
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          elementUI: {
            name: 'chunk-elementUI',
            priority: 20, // 权重需大于 libs
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
    }
  },

  devServer: {
    port: 4040,
    disableHostCheck: true,
    overlay: {
      warnings: false,
      errors: true
    }
  },

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, './src/assets/css/variable.scss')
      ]
    }
  },

  publicPath: '/'
}