React按需加载Antd

日结博客 16.04.18 HangZhou

Antd作为阿里开发的一个React UI库(不仅仅是UI库)

如何按需加载呢?

其实很简单

1.安装antd

npm install antd --save

yarn add antd

2.引入antd的css库

在webpack.config.dev.js的module里的oneOf添加一下babel-loader

PS: 记住在webpack.config.prod.js的相同位置也要添加上


{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
                plugins: [
                  ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
                ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
          },

3.在需要的地方按需使用就好了


import { Button } from 'antd'

render() {
    ...
    <Button />
}

ps:附上一个更简单的方式

利用babel-plugin-import的方式

1.首先安装一下依赖


npm i babel-plugin-import --save-dev 

2.修改.babelrc文件,在options节点下


{
    "plugins": ["transform-runtime", ["import", { "libraryName": "antd", "style": true }]]
  }

大功告成!


        喜欢就点个赞吧。谢谢你~

        :D



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页