美文网首页antd
nextjs加入antd按需加载配置方法

nextjs加入antd按需加载配置方法

作者: 坚韧难囚 | 来源:发表于2019-11-19 18:42 被阅读0次

    .babelrc文件下,按照antd文档按需加载加入;

    {

        "presets": ["next/babel"],

      "plugins": [

        [  "import",

            {

              "libraryName": "antd",

              "style": "css"

            }]

      ]

      }

    next.config.js文件里面加入

    webpack(config, { isServer }) {

        if (isServer) {

          const antStyles = /antd\/.*?\/style\/css.*?/

          const origExternals = [...config.externals]

          config.externals = [

            (context, request, callback) => {

              if (request.match(antStyles)) return callback()

              if (typeof origExternals[0] === 'function') {

                origExternals[0](context, request, callback)

              } else {

                callback()

              }

            },

            ...(typeof origExternals[0] === 'function' ? [] : origExternals),

          ]

          config.module.rules.unshift({

            test: antStyles,

            use: 'null-loader',

          })

        }

        return config

      }

    相关文章

      网友评论

        本文标题:nextjs加入antd按需加载配置方法

        本文链接:https://www.haomeiwen.com/subject/uzsanqtx.html