标签： vue

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

使用Nuxt.js构建网站时，使用UI库，能够更快的完成页面的构建，当盲目的引用，则会带入大量项目中不需要的组件，极大的增加构建后的项目大小，导致用户加载页面时间过长，文件过大，影响用户体验。因此按需加载就非常必要。

Ant Design 提供了多种按需加载的方案，对于 Nuxt.js 项目来说，因为SSR是在服务端进行，因此组件是在服务端和客户端都需要引入的，因此如果在单文件组件中引入指定的组件，通过loader加载时，会加载组件的css，但是服务端编译的时候是不认识css的，会导致报错，因此还是基于插件文件的方式，将插件文件中原本的：

01
import Antd from 'ant-design-vue/lib'

更改为

01
02
03
import {
  Form, Button // ... 你所用到的组件
} from 'ant-design-vue';

并在 nuxt.config.js 中的 css 里面去掉引用 antd 的 css 文件，改为通过build里面的babel插件引入

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  // ...
  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 图标

01
02
03
04
export {
  // 需要使用到的 Icons
  InfoCircleFill, DownOutline, UpOutline
} from '@ant-design/icons'

更改 nuxt.config.js 中 webpack 的设置：

01
02
03
04
05
06
07
08
{
  // ...
  build: {
    extend(config) {
      config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './plugins/antd-icons.js') // 引入需要的
    }
  }
}