乐趣区

关于前端:react入门坑next篇之antd按需引入

本文应用 react^17.0.1、next.js^10.0.0、babel-plugin-import^1.13.3;且只实用于 next.js10 版本

在应用 antd 时,按需引入是优化文件打包体积必不可少的一个步骤,在 antd 文档中间接导入模块:

import {Button} from "antd";

这样便可按需引入模块,但该按需引入只是引入了 js 模块,咱们的款式文件还须要在_app.js 中再引入:

//app.js
import "antd/dist/antd.css";

且这样的引入并不是按需引入 css 款式,而是一次把所有组件款式全副引入,那么在 next.js10 中该如何按需引入 antd 的 css 组件款式呢?
这里咱们用了 antd 官网提倡的按需引入包 babel-plugin-import

创立 babel.config.js 文件

在我的项目根目录下咱们新建一个 babel.config.js 文件用来配置 babel 配置;这里必须创立 js 格式文件,不能创立.babelrc 文件;写入配置:

//babel.config.js
module.exports = {presets: ["next/babel"],
    plugins: [
        [
            "import",
            {
                libraryName: "antd",
                libraryDirectory: "lib",
                style: function (name) {// console.log(name);
                    return `${name}/style/index.css`;
                },
            },
        ],
        [
            "import",
            {
                libraryName: "@ant-design/icons",
                libraryDirectory: "lib/icons",
                camel2DashComponentName: false,
            },
            "@ant-design/icons",
        ],
    ],
};

咱们来解释下上述配置
presets 是应用 next.js 自带的 babel 配置
plugins 则是咱们新增的 babel 配置
咱们新增了两个,别离是给 antd 的款式引入与其 icon 引入应用的;css 的按需引入重点在

[
    "import",
    {
        libraryName: "antd",
        libraryDirectory: "lib",
        style: function (name) {return `${name}/style/index.css`;
        },
    },
],

依据模块名引入对应的 css,至于为什么 style 要用办法返回 path,是因为当 style 的值为 true 时,默认引入 less 文件,咱们这里就不多增加 less 配置项了(用的 sass),当 style 的值为 ”css” 时则会引入../lib/style 目录下的 css.js 文件并执行引入对应的 css 文件, 但这在 next10 中是不被容许的,next10 中不容许中 node_modules 中执行 js 引入 css, 但容许间接引入 css 文件,这也就是为什么 babel 配置文件得是 js 格局而不能是.babelrc

这样就解决了咱们的 css 按需引入,没了,拜~~

退出移动版