使用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') // 引入需要的 } } }