IOS美区账号微信: springsunshine2017

前端技术 · 2021年9月14日 2

create-react-app+antd 实现样式的按需加载 【成功案例】

最近使用create-react-app+antd搭建项目,不过antd使用到的组件很少,所以样式需要用到按需加载,但是呢,网上找了很多的教程,要么有些是没有用的,要么有些就是不完整的。

大环境说明:我不想暴露webpack的配置项,所以没有使用npm run eject。

所以接下来如果想改create-react-app脚手架创建的项目中的配置就要用到一下几个插件:

1、react-app-rewired
2、babel-plugin-import
3、customize-cra

第一步:安装antd按需加载的插件babel-plugin-import

cnpm i babel-plugin-import --save-dev

第二步:安装react-app-rewired

cnpm i react-app-rewired --save-dev
同时需要改package.js中的script属性
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
},

第三步:安装customize-cra

npm install customize-cra --save-dev


安装以后需要在package.js同级目录下创建config-overrides.js文件,接下来在这个文件中写我们自己的配置

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {        
        libraryName: 'antd',        
        libraryDirectory: 'es',       
        style: 'css'
    })
)

之后在组件中测试

import { Button } from 'antd';
function App() {
   return (
      <div>
         <Button>antd 实现样式的按需加载</Button>
      </div>
   )
}
export default App;

这样就可以实现按需加载antd的组件,并且无需手动引入样式了。

放一张张我的项目对比图:
对比可见,使用了按需加载后,css的包体减小的不是一点点,美滋滋。。。

以上就是create-react-app+antd 实现样式的按需加载 【成功案例】的全部内容,欢迎大家一起探讨哈,啦啦啦