使用Nuxt.js构建网站时，使用UI库，能够更快的完成页面的构建，当盲目的引用，则会带入大量项目中不需要的组件，极大的增加构建后的项目大小，导致用户加载页面时间过长，文件过大，影响用户体验。因此按需加载就非常必要。
Ant Design 提供了多种按需加载的方案，对于 Nuxt.js 项目来说，因为SSR是在服务端进行，因此组件是在服务端和客户端都需要引入的，因此如果在单文件组件中引入指定的组件，通过loader加载时，会加载组件的css，但是服务端编译的时候是不认识css的，会导致报错，因此还是基于插件文件的方式，将插件文件中原本的：
import Antd from 'ant-design-vue/lib'
更改为
import {
Form, Button // ... 你所用到的组件
} from 'ant-design-vue';
并在 nuxt.config.js 中的 css 里面去掉引用 antd 的 css 文件，改为通过build里面的babel插件引入
{
// ...
css: [
// 'ant-design-vue/dist/antd.less',
],
// ...
build: {
babel: {
plugins: [
[
'import',
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: true,
}
]
]
},
transpile: [/ant-design-vue/],
}
}
如果有在使用 Icons ，ant-design 的 Icons 会将全部用到没用到的图标全部引入，文件相当大，可以考虑新增一个 ant-icons.js 插件文件，指定项目中需要用到的 Icons 图标
export {
// 需要使用到的 Icons
InfoCircleFill, DownOutline, UpOutline
} from '@ant-design/icons'
更改 nuxt.config.js 中 webpack 的设置：
{
// ...
build: {
extend(config) {
config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './plugins/antd-icons.js') // 引入需要的
}
}
}