Nuxt.js 中按需加载 ant-design-vue

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