react项目实现按需打包的2个方法

Eve-Guo

于 2020-09-17 16:30:40 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/lanxue0803/article/details/108646485

版权

本文介绍了两种在React项目中实现按需打包的方法：一是利用react-app-rewired，二是修改暴露的webpack配置。通过react-app-rewired可以避免eject操作，并使用babel-plugin-import插件实现按需加载CSS，减少资源体积。而在webpack.config.js中进行配置调整，也能达到按需打包的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.利用react-app-rewired实现按需打包

// 第一步

yarn add babel-plugin-import react-app-rewired

//第二步 修改package.json文件

"scripts": {
    "start": "react-app-rewired start",  //主要修改就是把以前的react-scripts包替换为react-app-rewired
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
//第三步
在项目根目录下创建config-overrides.js文件

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', {libraryName: 'antd', style: 'css'}], config);
    return config;
};