前言
公司有好几个项目都有后台管理系统，为了方便开发，所以选择了 vue 中比较火的后台模板 作为基础模板进行开发。但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件都十分之大，就一个 vendor 就有 770k 的体积（下图是基础模板，什么都没加打包后的文件信息）：
通过 webpack-bundle-analyzer 进行分析可得，体积主要来源于饿了么UI（体积为 500k），因为没对其进行部分引入拆分组件，导致 webpack 把整个组件库都打包进去了。其次就是 vue 本身，体积也达到了 80k 之大。
所以，对其进行打包优化，是一件刻不容缓的事情。
优化
优化主要目的有：
解决第一个问题，很多人都会想到资源文件放在 CDN 上就好了，没错，这次我们就是通过 CDN 来解决加载问题。
CDN - 提高加载速度
像 vue， element ui 这些比较成熟的框架/组件库，一般都有免费、高速、公共的 cdn 供开发者使用，鉴于大部分用户均在国内，所以这次使用了 bootcdn 这个库。该库热门资源比较齐全，各个版本都有，而且国内访问速度很快，简直是开发者的福音。
在 index.html 中引入 vue 和 饿了么组件。
step 3 告诉 webpack 使用 DllPlugin 进行打包
修改 build/webpack.prod.conf.js:
再次打包：
Build complete.
Tip: built files are meant to be served over an HTTP server.
opening index.html over file:// won't work.
发现 vendor 现在只有 40k 的体积，减少了一半的体积，而且打包速度也快了 2s，而相对于最开始的基础模板，打包速度快了 12s，这是很让人欣慰。
后记
使用了 cdn 和 dll 打包后，无论是打包速度还是页面加载的速度都有很大的提升。因此将此次优化记录下来，并传上了 GitHub 中。