本文内容使用 NuxtJS 2.14.1 (其中 vue 为 2.6.11， webpack 为 4.44.1) 和 Ant Design of Vue 1.6.4。因为版本和不同类库造成的差异请大家多进行搜索。
问题
用 NuxtJS 开发博客(https://bun.plus)以来，一直有一些体验上的问题，这次正好有时间，便来优化一下，目前的问题主要有：
依赖的 js css 文件较大
服务器端渲染生成的 HTML 较大
导致访问速度较慢，特别是首次加载。
依赖的 js css 文件较大
首屏加载过慢有很多原因，最常见的就是网页依赖的资源(例如 vue 和各种类库的 js)太多或者太大，浏览器需要花一些时间才能将它们下载下来。
通过“开发人员工具”查看加载时间
打开浏览器的 开发人员工具 - 网络 ，然后访问网站，来查看网页需要加载哪些东西，以及它们的大小和耗时。
查看时需要勾选 禁用缓存 来模拟首次到访网站的浏览者的真实状态。
如果界面和我的略有不同，可以点击右上角齿轮图标按钮，勾选 使用大请求行。
通过 Size 列可以看到，60a2df....js 这个 js 文件大小为 594 k(相当于半兆)，由于采用了 gzip 压缩，它的原始大小为 2.4MB，是一个相当大的文件了，而且花了5秒才下载完成，体验非常不好。
分析文件内容
由于这个文件在 /_nuxt 下，且名字为随机生成，这应该是 webpack 打包生成的文件。NuxtJS 内置了 webpack-bundle-analyzer 来分析打包后的文件(https://zh.nuxtjs.org/api/configuration-build/#analyze)。
打开 nuxt.config.js 并找到 build 属性，添加 analyze: true 以启用分析模式：
module.exports = {
build: {
analyze: true
}
}
然后在控制台中输入 npx nuxt build --analyze 等待分析完成。
可以看到 vendors.app.js 很大，而它主要又由 ant-design-vue、@ant-design/icons/lib 和 moment 等内容组成。如果能把这些大个的文件减少，那生成的 vendors.app.js 文件体积也会减小。
将 antd vue 改为按需加载
从分析结果中可以看到 ant-design-vue 下面有很多的组件，虽然我并没有使用到，但也包含在了里面，应该是因为在引入 antd vue 时直接全量引入导致的。通过查找 antd vue 的 按需加载文档(https://www.antdv.com/docs/vue/getting-started-cn/#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD) 了解到，可以使用 import Button from 'ant-design-vue/lib/button' 的方式来加载组件，那么只需要修改 NuxtJS 的 antd vue plugin 就好了。
我没有按文档使用 babel-plugin-import，因为我希望 antd.css 不要打包，我自己通过 CDN 来加载，这个后面会说。
找到 plugins/antd-ui.js 文件，原来的写法是直接引用整个 antd vue
import Vue
现在改为按需引入需要的组件
import Vue
注意需要手动为 Vue 加上 $message 和 $notification 才能正常使用
减小 antd icons 占用的空间
antd vue 依赖 2.1.1 版本的 antd icons，而这 icons 也太大了……搜索到比较好的解决方案是 #12011 Svg icons make bunlde size too large(https://github.com/ant-design/ant-design/issues/12011#issuecomment-420038579) 说的，根据它的指引进入到 reduce-antd-icons-bundle-demo (https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo)可以看见解决方案。
是将我们需要使用的图标整合到一个 js 文件里，然后再通过 webpack 的 alias 用我们的 js 文件替代掉原始的占空间很大的 antd icons 文件。
首先，在 assets 文件夹下建立 antd-icons.js 文件(其实放在哪个文件夹、文件叫什么没有强制要求)，把我们用到的图标都添加进去，包括控件上依赖^Xz[{ {XiyB552K>zb7fc
转播
