How to optimize React app bundle size using rollup.js - reactjs

Question

I am trying to use rollup.js to bundle my react app. And i realized the bundle .js file is bigger than compiled with create-react-app.
How can I solve this. I just discovered rollup.js last two weeks and love it. I need help to get this done.
I tried with options I found on the net by creating peerDev in package.json like below
"peerDependencies": {
"react": ">= 16.x.x",
"styled-jsx": ">= 3.x.x"
}
and then with this line "external: id => /^react|styled-jsx/.test(id)," in rollup.config.js. I realized this has to do with react components only but not bundling for react app even though it did reduce the file size drastically. The page doesn't run when compiled that way
This is the rollup config file without the peerDependencies reference
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import replace from "rollup-plugin-replace";
//import pkg from "./package.json";
const production = !process.env.ROLLUP_WATCH;
const NODE_ENV = process.env.NODE_ENV;
export default [
{
input: "src/index.js",
output: {
name: "bundle",
file: "dist/main.js",
format: "iife"
},
"process.env": {
NODE_ENV: JSON.stringify("production")
},
plugins: [
replace({
"process.env.NODE_ENV": JSON.stringify(NODE_ENV)
}),
babel({
exclude: "node_modules/**"
}),
resolve(),
commonjs(),
!production && livereload("dist"),
production && terser()
],
globals: {
react: "React"
},
watch: {
clearScreen: false
}
}
];
And this is just the simple react code.
import ReactDOM from 'react-dom';
ReactDOM.render(<h3>React with Rollup</h3>,document.getElementById('root'));
After compilation. This is the file size I get 961K. This should be smaller. Becuase, with much bigger applications, the file sizes are far smaller than this. Prompt help will be very much appreciated