在 Next.js 中使用 antd 的注意事项和技巧

Antd 是一款优秀的 React UI 库，其中包含了许多流行的组件和样式。在 Next.js 中使用 Antd 可以极大地提高前端开发效率和用户体验。然而，在使用中我们也需要注意一些细节和技巧，以确保 Antd 在 Next.js 中的正常运行和优化性能。本文将分享一些在我的实践中积累的经验和注意事项，希望对大家有所帮助。

1. 安装依赖

在使用 Antd 前，我们需要先安装相关依赖。在 Next.js 项目中，我们可以使用 yarn 或者 npm 进行安装。

使用 yarn 安装

yarn add antd react react-dom

使用 npm 安装

npm install antd react react-dom

2. 按需引入组件

Antd 中包含了大量的组件和样式，但我们并不需要全部引入。引入过多的组件会导致代码冗余和页面加载缓慢。因此，我们需要进行按需引入组件。

安装 babel-plugin-import

我们可以使用 babel-plugin-import 实现按需引入组件。首先，我们需要安装该插件。

使用 yarn 安装

yarn add babel-plugin-import -D

使用 npm 安装

npm install babel-plugin-import -D

配置 babel

安装好 babel-plugin-import 后，我们需要进行一下配置，让其对代码进行转换。

修改 .babelrc

// www.javascriptcn.com code example
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

修改 next.config.js

// www.javascriptcn.com code example
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  }
};

进行完以上配置后，我们就可以在代码中使用按需引入 antd 组件了。

import { Button } from "antd";

function MyComponent() {
  return <Button>Click Me</Button>;
}

export default MyComponent;

3. 引入样式

在按需引入组件后，我们还需要类似地引入 antd 样式。可以使用 less 或者 css 进行引入。

使用 less

import "antd/dist/antd.less";

使用 css

import "antd/dist/antd.css";

以上两种样式方式会使得样式全部引入，会影响页面加载速度。因此我们需要对其进行一定的优化。

使用 css-modules

在 Next.js 中，我们可以使用 css-modules 对样式进行管理，避免样式冲突的问题，并进行优化，减少不必要的样式加载。

安装 css-modules

首先我们需要安装相关依赖。

使用 yarn 安装

yarn add -D next-css css-loader

使用 npm 安装

npm install --save-dev css-loader next-css

引入 CSS 进行配置

在项目根目录创建 next.config.js 并引入 less 和 css 文件。

// www.javascriptcn.com code example
const withCSS = require("@zeit/next-css");
const withLess = require("@zeit/next-less");

module.exports = withCSS(
  withLess({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: "[local]__[hash:base64:5]"
    },
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: {}
    }
  })
);

经过以上配置后，我们就可以使用 css-modules 对 antd 样式进行优化和管理。

import styles from "./styles.less";
import { Button } from "antd";

function MyComponent() {
  return <Button className={styles.button}>Click Me</Button>;
}

export default MyComponent;

4. 优化性能

在使用 Antd 后，我们需要考虑一些优化性能的问题，防止页面加载过慢或卡顿。

使用 babel-plugin-import

我们已经介绍了使用 babel-plugin-import 实现按需引入组件的方法，这样可以避免全部组件的引入，减少代码冗余和页面加载缓慢。

CDN 引入

另外，我们也可以使用 CDN 的方式引入 Antd 提供的组件和样式，可以有效地减少资源加载时间和带宽。

移除不需要的组件

在使用 Antd 的过程中，我们可能不需要全部的组件，因此我们可以通过移除不需要的组件来提升页面渲染速度。

避免页面重渲染

在使用组件时，我们需要考虑组件的更新和是否重新渲染。为了避免页面重渲染，我们可以使用 React.memo 进行组件的浅比较，从而避免不必要的更新。

// www.javascriptcn.com code example
import React, { memo } from "react";
import { Button } from "antd";

const MyButton = memo(props => {
  console.log("Button is rendering");

  return <Button {...props}>Click Me !</Button>;
});

function MyComponent() {
  return <MyButton />;
}

export default MyComponent;

结束语

通过对 Antd 在 Next.js 中使用过程中的注意事项和技巧的介绍，相信大家能够更好地使用和优化 Antd，提高前端开发效率和用户体验。当然，在使用 Antd 时也可以结合自身需求进行定制和扩展。欢迎大家留言讨论。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0242de46428fe9ecc867c