cli dll打包 vue_记一次使用 vue-admin-template 的优化历程

前言

公司有好几个项目都有后台管理系统，为了方便开发，所以选择了 vue 中比较火的 后台模板 作为基础模板进行开发。但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件都十分之大，就一个 vendor 就有 770k 的体积(下图是基础模板，什么都没加打包后的文件信息)：

通过 webpack-bundle-analyzer 进行分析可得，体积主要来源于 饿了么UI(体积为 500k)，因为没对其进行部分引入拆分组件，导致 webpack 把整个组件库都打包进去了。其次就是 vue 本身，体积也达到了 80k 之大。

所以，对其进行打包优化，是一件刻不容缓的事情。

优化

优化主要目的有：

1. 加快资源加载速度，减少用户等待的时间和首页白屏时间，提高用户体验。
2. 加快打包速度，不要将时间浪费在等待打包上。

解决第一个问题，很多人都会想到资源文件放在 CDN 上就好了，没错，这次我们就是通过 CDN 来解决加载问题。

CDN - 提高加载速度

像 vue， element ui 这些比较成熟的框架/组件库，一般都有免费、高速、公共的 cdn 供开发者使用，鉴于大部分用户均在国内，所以这次使用了 bootcdn 这个库。该库热门资源比较齐全，各个版本都有，而且国内访问速度很快，简直是开发者的福音。

在 index.html 中引入 vue 和 饿了么组件。

因为依赖是从外部引入的，所以需要告知 webpack 在打包时，依赖的来源。

修改 webpack.base.conf.js：

再一次打包，确实能极大的压缩了打包的体积，从 700k 骤减至 130k：

但是随之而来的就有问题了：

明明我在本地开发，但是由于引入了线上的生产版本的 vue 文件，因此 vue-dev-tools 就不能进行调试。

因此，我们需要再次调整一下 webpack 的配置，webpack.base.conf.js，而且 webpack 注入的 js 总是在最后面的，因此，我们需要 html-webpack-include-assets-plugin 帮忙在注入 app.js 后，再注入相对应的组件库 :

OK，这时候，既能兼顾打包后的体积大小，也能在开发模式中使用 vue-dev-tool 进行调试。

DLL - 提高打包速度

经常打包的前端会发现，很多时候，我们为了修复某些bug(如 promise 在 ie Safari 下的 bug)，而新引入了一个 polyfill，然而，打包完后发现，vendor 的 hash 值变了，而整个 vendor 只新加了一个 es6-promise 的依赖，但是付出的代价就是，需要抛弃之前打包好的 vendor，用户重新访问时，需要再一次拉取一个全新的 vendor，这个代价就有点大了。

这时候，使用 dllPlugin 打包就有优势了。它可以将一些基础依赖模块统一先打包起来，当正式打包时，则可以略过这些模块，不再重复打包进去 vendor，提高打包速度的同时也能减少 vendor 的体积。

如，后台管理系统基础模块基本有以下几个：

• axios： ajax 请求。
• vuex： 全局状态管理。
• js-cookie： 前端处理 cookie。
• vue-router： 路由管理。

这四个基础模块几乎是必须的，那么可以先提取出来。

step 1 打包基础模块

先在 build 文件夹下新建一个用于打包 dll 的配置文件 webpack.dll.conf.js：

然后在 package.json 中加入一条命令：

执行 yarn build:dll 或者 npm run build:dll 即可完成打包 dll。执行完成后：

同时，可以在 build 目录下，找到各个模块对应关系文件 vendors-manifest.json 和 static/js 下的 vendor.dll.js。

step 2 页面中引入 vendor

打包后的 dll 文件需要手动在 index.html 引入：

step 3 告诉 webpack 使用 dllPlugin 进行打包

修改 build/webpack.prod.conf.js:

再次打包：

发现 vendor 现在只有 40k 的体积，减少了一半的体积，而且打包速度也快了 2s，而相对于最开始的基础模板，打包速度快了 12s，这是很让人欣慰。

后记

使用了 cdn 和 dll 打包后，无论是打包速度还是页面加载的速度都有很大的提升。因此将此次优化记录下来，并传上了 GitHub 中。

作者：梁建忠来源：https://blog.leungjz.top/2018/05/15/ji-yi-ci-vue-template-you-hua-li-cheng/商业用途请与原作者联系，本文只用作展示分享，不妥侵删！