vue2生产环境打包体积优化核心是用externals剥离vue等稳定大库，配cdn引入、关productionsourcemap、启gzip压缩，并确保使用vue.runtime版。
Vue 2 生产环境打包体积优化，核心是把稳定、体积大、不常改动的依赖从主包中“移出去”，而不是一味压缩或拆分。运行时体积（如 vue.runtime.esm.js 或最终打包进 app.js 的 Vue 内核）过大，往往是因为 Vue 被重复打包、全量引入，或未配合 externals 剥离。
用 externals 剥离 Vue 运行时
这是最直接减少运行时体积的方式：告诉 Webpack “Vue 已经在全局存在了，别再打进包里”。需三步配合：
- 在
vue.config.js中配置configureWebpack.externals，例如：externals: { vue: 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex' } - 确保这些库的全局变量名与 CDN 提供的一致（如
vue.min.js暴露的是Vue，不是vue） - 在
public/index.html的中手动引入对应 CDN 链接，例如：<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.runtime.min.js"></script>
关闭 productionSourceMap
SourceMap 是开发调试用的映射文件，生产环境完全不需要。它虽不参与运行，但会额外生成 .js.map 文件并增大构建产物体积（通常增加 30%～50%）。
在 vue.config.js 中设置：productionSourceMap: false
启用 Gzip 预压缩，减小传输体积
虽然不改变打包后 JS 文件本身的大小，但能让浏览器实际下载的体积大幅下降（通常压缩率 60%～75%）。用户感知的是“运行时加载更快”，等效于缩小了运行时资源体量。
- 安装插件：
npm install compression-webpack-plugin@5.0.1 --save-dev - 在
vue.config.js的configureWebpack中添加插件，只对.js、.css等文本类资源生效 - 关键参数：
threshold: 10240（仅压缩 ≥10KB 的文件），deleteOriginalAssets: false（保留原始文件，兼容不支持 .gz 的旧客户端）
检查是否误打了完整版 Vue
确认项目没在 main.js 或其他地方 import 了 vue/dist/vue.esm-bundler.js 或 vue/dist/vue.js —— 这些是带编译器的完整版，比 vue.runtime.esm.js 大 30% 以上。
推荐写法（使用运行时版本）：import Vue from 'vue'（只要 vue.config.js 中没显式覆盖 resolve.alias，Vue CLI 默认就指向 runtime 版本）
如果用了 vue-template-compiler 或需要 template 字符串编译，才考虑回退到完整版 —— 但应优先改用 render 函数或单文件组件预编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
