VueJS 2如何压缩/public目录下可独立引用的JS/CSS文件

方案1：命令行脚本预压缩（最符合保持流程简洁的要求，零webpack配置修改） #

这个方案不需要调整原有Vue项目的构建配置，仅通过新增独立压缩步骤接入现有npm run build流程，10分钟内即可配置完成。

• 第一步：安装压缩依赖
  执行命令安装JS、CSS压缩的轻量命令行工具：
  npm install terser clean-css-cli --save-dev
  其中terser是目前兼容性最好的JS压缩工具，支持ES6+语法，压缩效率高于旧版uglify-js；clean-css-cli是专门用于CSS压缩的命令行工具，无额外依赖。
• 第二步：调整文件存放位置
  建议在项目根目录新建static-src文件夹，把需要给客户独立引用的JS、CSS源文件放在这个目录下，不要直接把源文件丢在public目录，避免压缩时重复处理、污染静态资源目录。public目录仅存放压缩后的最终产物，和之前的引用逻辑完全一致。
• 第三步：配置压缩脚本
  打开项目根目录的package.json，在scripts节点下新增压缩命令，同时修改原有build命令，把压缩步骤前置：

  {
    "scripts": {
      // 原有其他脚本保留不动
      "compress-assets": "terser ./static-src/client-integration.js -o ./public/client-integration.min.js -c -m && cleancss ./static-src/client-style.css -o ./public/client-style.min.css",
      "build": "npm run compress-assets && vue-cli-service build"
    }
  }
  

  命令参数说明：
  • terser命令中-c表示开启代码冗余剔除、-m表示开启变量名混淆，可将JS体积压缩到最小
  • 如果暂时不需要压缩CSS，直接删除&&后面的cleancss段落即可，后续需要时再补充
• 第四步：正常使用
  后续还是和之前一样执行npm run build即可，脚本会自动先把独立JS/CSS压缩好输出到public目录，Vue构建时会原样把压缩后的文件拷贝到dist产物目录，部署到Azure AppService的流程完全不需要改动，客户直接引用站点根路径下的client-integration.min.js即可正常使用。

方案2：Webpack多入口配置（适合后续需要对独立JS做模块化管理的场景） #

如果后续需要在独立给客户用的JS里引入npm依赖、使用ES新特性，可直接通过Vue CLI的多入口能力把独立资源接入构建流，不需要额外引入工具：

• 把独立JS的源码放到src/sdk/目录下统一管理
• 在项目根目录的vue.config.js中新增如下配置：

  module.exports = {
    configureWebpack: {
      entry: {
        app: './src/main.js', // 保留原有主项目入口
        'client-integration.min': './src/sdk/index.js' // 新增独立JS入口
      }
    },
    chainWebpack: config => {
      // 把独立JS从主项目index.html的自动注入列表排除，避免影响主应用加载
      config.plugin('html').tap(args => {
        args[0].excludeChunks = ['client-integration.min']
        return args
      })
    }
  }
  

• 配置完成后执行正常build命令，webpack会自动对独立JS做转译、压缩、tree-shaking，最终产物直接输出到dist目录，CSS如果是在独立JS中引入的，也会被自动抽取压缩，不需要额外配置。
• 这个方案会修改webpack配置，如果希望尽可能不动原有构建逻辑，优先选方案1即可。

• 两个方案最终产出的独立JS都不需要依赖主Vue应用即可运行，客户引用方式和之前的逻辑完全一致，不需要做接入调整
• 配置完成后建议本地先执行一次build，检查dist目录下的对应JS文件是否为压缩状态，确认无误再部署即可

内容的提问来源于stack exchange，提问作者AndyV