create-react-app按需配置antd按需加载


yarn run eject

->~ yarn create react-app my-app
->~ cd my-app
->~ yarn run eject | npm run eject


 
image.png

运行成功后eject后会暴露webpack的配置,package.json中也会列出所有相关依赖包,如:

  • config目录
  • build.js / start.js / test.js
  • package.json / yarn.lock 会更新

安装antd 按需加载

->~ yarn add antd | npm install antd --save | cnpm install antd --save (--save 安装到生产环境dependencies、--seve-dev 代表安装到开发本地devDependencies)
->~ yarn add babel-plugin-import -D | --dev (yarn add) | npm install babel-plugin-import --save-dev babel-plugin-import
根目录新建:.babelrc文件 添加:

{
  "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "ant"], ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"] ] } 

注意:如果是运行了eject ,webpack配置了babelrc: false ,单独根目录新建.babelrc会报错的,需要在webpack.dev.js配置,在module模块 ,loader: require.resolve('babel-loader')对象中的plugins数组中添加

[
  "import", {libraryName: "antd", style: 'css'} // 移动端添加 "libraryName": "antd-mobile" ] //antd按需加载 

完整的:


 
image.png

运行查看效果:

->~ npm start

 





免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM