feat: 优化代码大小

1012414140@qq.com

2026-10-15 eff1aeeec8c8b24dac27defae65e2ad892f8046b

 vue.config.js

@@ -1,55 +1,107 @@
var path = require("path")
var path = require('path')
module.exports = {
    baseUrl: './',
    configureWebpack: {
        optimization: {
            minimizer: [
                new (require('terser-webpack-plugin'))({
                    terserOptions: {
                        compress: {
                            drop_console: true, // 删除生产环境console.log
                            drop_debugger: true, // 删除debugger
                        }
                    }
                })
            ]
        },
        resolve: {
            alias: {
                '@': path.join(__dirname, 'src')
            }
        }
  publicPath: '/',
  assetsDir: 'static',
  productionSourceMap: false, // 关闭sourceMap，减少产物体积

  // 强制抽离 CSS 为独立文件，不内联进 JS
  css: {
    extract: true
  },

  configureWebpack: {
    // ========== 只外置：ElementUI / ViewUI / ECharts，必须外置 vue ==========
    externals: {
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'view-design': 'ViewUI',
      'echarts': 'echarts'
    },
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        sockHost: 'localhost',
        port: 8082,
        disableHostCheck: true,
        proxy: {
            '/':{
                target:'http://183.196.93.178:8089',
                //target:'http://127.0.0.1:8089',
                changeOrigin:true,
                pathRewrite:{
                    '/':''
                }
    // =======================================================

    optimization: {
      minimizer: [
        new (require('terser-webpack-plugin'))({
          terserOptions: {
            compress: {
              drop_console: true, // 移除console
              drop_debugger: true, // 移除debugger
              pure_funcs: ['console.log', 'console.info', 'console.warn']
            },
            mangle: {
              safari10: true
            },
            output: {
              comments: false // 移除所有注释
            }
          },
          extractComments: false,
          parallel: true // 多进程压缩
        })
      ],

      runtimeChunk: 'single',

      splitChunks: {
        chunks: 'all',
        minSize: 10 * 1024, // 20kb → 10kb，拆分更充分
        minChunks: 2,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        name: false,

        cacheGroups: {
          common: {
            name: 'common',
            chunks: 'all',
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true
          },
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
            priority: 10,
            reuseExistingChunk: true
          }
        }
      }
    },
    chainWebpack : config => {
        // 图片压缩（需要安装image-webpack-loader：npm install image-webpack-loader -D）
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                mozjpeg: { progressive: true, quality: 65 },
                optipng: { enabled: false },
                pngquant: { quality: [0.65, 0.9], speed: 4 },
                gifsicle: { interlaced: false },
                webp: { quality: 75 } // WebP压缩质量
            })
            .end();
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src')
      }
    }
}
  },

  // 图片优化 + 关闭预加载冗余
  chainWebpack(config) {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = 4 * 1024
        return options
      })
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  },

  devServer: {
    sockHost: 'localhost',
    port: 8082,
    disableHostCheck: true,
    proxy: {
      '/': {
        target: 'http://183.196.93.178:8089',
        // target: 'http://192.168.0.147:8089',
        changeOrigin: true,
        pathRewrite: {
          '/': ''
        }
      }
    }
  }
}