压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些 的性能优化建议

技术栈： vue-cli3 + vue2 + webpack4
主要插件：elementUI + echarts + axios + momentjs

目标： 通过一系列的优化方案，对比打包体积和速度的前后变化，来验证方案的有效性

• 初始体积

vue 项目可以通过添加--report命令： ，打包后 dist 目录会生成 report.html 文件，用来分析各文件的大小

或者通过安装 插件来分析，步骤如下：

1）安装

2）vue.config.js中 引入

3）npm run serve运行后，在浏览器打开? 可以看到分析页面

• 初始打包速度

从上面的打包分析页面中可以看到， 体积为 ，其中最大的几个文件都是一些公共依赖包，那么只要把这些依赖提取出来，就可以解决 chunk-vendors.js 过大的问题

可以使用 来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中

1）vue.config.js 中配置：

2）在 index.html 中使用 CDN 引入依赖

验证 externals 的有效性：

重新打包，最新数据如下：

打包体积：

打包速度：

使用 externals 后，包体积压缩50%、打包速度提升26%

为什么没有使用 externals 的方式处理组件库呢？

externals缺点：直接在html内引入的，失去了按需引入的功能，只能引入组件库完整的js和css

组件库按需引入的原理：最终只引入指定组件和对应的样式

elementUI 需要借助 babel-plugin-component 插件实现，插件的作用如下：

如按需引入 Button 组件：

编译后的文件（自动引入 button.css）：

通过该插件，最终只引入指定组件和样式，来实现减少组件库体积大小

1）安装 babel-plugin-component

2）babel.config.js中引入

验证组件库按需引入的有效性：

重新打包，最新数据如下：

打包体积：

打包速度：

组件库按需引入后，包体积压缩72%、打包速度提升40%

同时 的体积也有了明显的减少，从降到了

原始体积：

按需引入后：

继续分析打包文件，项目中使用了 momentjs，发现打包后有很多没有用到的语言包

使用 插件，剔除掉无用的语言包

1）安装

2）vue.config.js 中引入

验证插件的有效性：

重新打包，最新数据如下：

打包体积：

打包速度：

减小三方依赖体积后，包体积压缩82%、打包速度提升59%

由于运行在 Node.js 之上的 webpack 是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力

就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度

1）安装

2）vue.config.js 中引入

验证 HappyPack 的有效性：

重新打包，最新数据如下：

打包速度：

使用HappyPack后，打包速度进一步提升了65%

由于测试项目较小，打包时间缩短的不算太多。实测发现越是复杂的项目，HappyPack 对打包速度的提升越明显

线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度

html、js、css资源，使用 gzip 后通常可以将体积压缩70%以上

这里介绍下使用 webpack 进行 gzip 压缩的方式，使用 插件

1）安装

2）vue.config.js 中引入

验证插件的有效性：

重新打包，原来 的体积压缩为

与 externals 的作用相似，都是将依赖抽离出去，节约打包时间。区别是 DllPlugin 是将依赖单独打包，这样以后每次只构建业务代码，而 externals 是将依赖转化为 CDN 的方式引入

当公司没有很好的 CDN 资源或不支持 CDN 时，就可以考虑使用 DllPlugin ，替换掉 externals

DllPlugin 配置流程大致分为三步：

1）创建 dll.config.js 配置文件

2）package.json 配置脚本

3）使用 将打包生成的dll文件，引用到需要的预编译的依赖上来，并通过 在打包时自动插入dll文件

vue.config.js 配置如下

先运行 打包生成依赖文件，以后只用运行 构建业务代码即可

经过上面的一系列优化，可以看到：

• 包体积由原来的 减少到 ，压缩了82%

• 打包速度由原来的 减少到 ，提升了65%

这些方式虽然很常规，但确实可以有效地提升项目的性能

本文主要介绍的是 项目打包构建方面 的优化方式，下一篇聊一聊 业务代码层面 的性能优化，其中会有很多有趣的方案

文章系列地址：github.com/xy-sea/blog

文中如有错误或不严谨的地方，请给予指正，十分感谢。如果喜欢或有所启发，欢迎 star