持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情
学习打包优化前需要了解 webpack。 所谓的优化主要涉及到两方面：
- 构建速度的优化
- 构建质量的优化
大多数 Vue 项目是基于 VueCLI 搭建的，而 VueCLI 的底层建筑是 webpack。webpack 是现在主流的功能强大的模块化打包工具，在使用 webpack 时，如果不注意性能优化，有非常大的可能会产生性能问题，性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等，因此性能优化也主要从这些方面来分析。
- 分析打包结果
- 把 VueCLI 升级到最新稳定版
- Gzip 压缩
- 不打包第三方包
- 路由懒加载
- 按需加载第三方组件
分析打包结果
- 如果你的编译速度慢，那么可以通过分析打包结果来知道是哪个包比较费时。
- 打包的内容
- 找出最大的模块
- 查找错误到达的模块
- 优化它！
通过分析打包结果，我们可以看到哪些包占用了打包的时间，还有哪些包的结果体积比较大。
vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。
这里还有一些有用的命令参数：
-
--modern使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。 -
--target允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。 -
--report和--report-json会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。 -
- 内部使用的 Webpack Bundle Analyzer 插件。
生成报告 npm run build --report
Gzip 压缩
- Gzip 压缩是一种数据传输过程中的压缩方式，它可以极大的压缩文件的大小。它不影响原始文件
一种文件压缩格式。用于HTTP 协议。Gzip 开启以后会将输出到用户浏览器的数据进行压缩的处理，这样就会减小通过网络传输的数据量，提高文件传输的速度。
把 VueCLI 升级到最新稳定版
VueCLI 是基于 webpack 构建的，它的升级可能会带来编译速度的提升或是编译质量的提升。
使用下面的命令查看你的 VueCLI 版本： vue --version
升级 VueCLI：npm install -g @vue/cli
不打包第三方包
- 提高编译的速度。
影响打包速度最根本的原因就是某些第三方包体积过大，所以打包速度就很慢。不对它打包！不要让 webpack 来处理它。可是不处理它，把它放哪里呢？通过 script 标签加载它，就不被 webpack 处理了。我们推荐使用第三方的 CDN 来加载资源，所谓的 CDN 说白了就是一个在线链接。
推荐 jsdelivr
路由懒加载
- 我们自己的代码非常多，将来 app.xxx.js 也会随之变得越来越大。文件太大的话会造成首次加载很慢。所以我们可以通过路由懒加载的方式优化它。
按需加载第三方组件
- 使用的组件不是太多，建议按需加载，所谓的按需加载就是仅仅只把使用到的组件打包到结果中，可以减小打包结果体积。
