I am using Material UI and aiming to decrease the bundle size by loading components on demand.
In my project, I have a Babel configuration in a .babelrc file.
The current .babelrc setup is as follows:
{
"presets": ["@babel/preset-env", "@babel/react"],
"plugins": [
["@babel/plugin-syntax-dynamic-import"],
["react-hot-loader/babel"],
["import", {
"libraryName": "antd",
"style": true
}],
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}Now, I need to include the following additions:
const plugins = [
[
'babel-plugin-import',
{
'libraryName': '@material-ui/core',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'core'
],
[
'babel-plugin-import',
{
'libraryName': '@material-ui/icons',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'icons'
]
];
module.exports = {plugins};How can I achieve this? The .babelrc seems to function differently than the .babelrc.js file.