Vue基础教程（28）ECMAScript 6语法之精简压缩生产环境的webpack：Vue项目瘦身大法：用Webpack给生产环境来个“魔鬼减肥”，代码瘦成一道闪电！

一、 为啥要给生产环境“减肥”？—— 都是“肥胖”惹的祸

想象一下，你精心打造了一个Vue应用，功能酷炫，界面精美。在本地开发环境跑得那叫一个欢脱。但当你信心满满地部署到生产环境后，用户却反馈：“老板，你的页面加载了10秒还没出来，是网络不好还是你家应用太‘重’了？”

尬不尬？太尬了！

这其实就是典型的“开发环境肥胖症”带到了生产环境。在开发时，为了我们调试方便，代码里充满了各种“辅助设施”：

• console.log()：遍地都是的“日志小纸条”。
• 详细的错误警告：Vue会给你贴心地提示各种可能的错误。
• 未压缩的ES6+代码：比如可爱的 const、let、箭头函数 =>、类 class，浏览器虽然能认识，但文件体积大啊。
• 未使用的库文件：可能你只用了某个UI库的一个按钮，却把整个库都打包进去了。

这些“脂肪”在开发时是宝贝，在生产环境就是累赘。它们会让你的静态资源文件（.js, .css）体积暴增，导致用户首次打开页面时加载时间变长，消耗更多流量，体验极差。

所以，给生产环境代码“减肥”（也就是优化和压缩），不是可选项，而是必选项！ 而Webpack，就是我们最得力的“健身教练”和“减肥专家”。

二、 认识我们的“减肥工具”—— Webpack生产环境配置

Webpack就像一个智能的厨房机器人，你告诉它食谱（配置），它就能把生的食材（ES6模块、Vue单文件组件、Less/Sass等）加工成美味佳肴（浏览器可运行的.js、.css）。

而针对生产环境，我们需要换一份“健康低脂”的食谱。核心思路就两点：

1. 剔除废物：去掉所有调试用的、不需要的代码。
2. 极致压缩：把有用的代码用最小的体积表达出来。

接下来，我们就来看看这份“减肥食谱”的秘方。

三、 “减肥”实战：一步步配置Webpack

假设我们有一个基本的Vue项目结构。我们的目标是为生产环境创建一个单独的配置文件 webpack.prod.config.js。

第一步：设定“减肥目标”—— Mode模式

这是最简单也最重要的一步。在Webpack配置中设置 mode: 'production'。

// webpack.prod.config.js
module.exports = {
  mode: 'production', // 核心：开启生产模式
  // ... 其他配置