Before anyone downvotes, let me clear some things out what the issue is and which information has been gathered about it:
Issue:
I'm currently trying to learn React from this Youtube Tutorial Playlist.
This guy is really good at explaining the framework, unfortunately the videos are outdated (2016).
Using his files from the lesson-4 Github branch, the final transpiled
bundle.js file is way smaller in size as mine.
Inspecting both files, I can see that because of the dependencies he used back in 2016 and the updated ones in 2018, the file sizes have changed a lot. This results that following Warning messages are displayed in my console after the build:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: bundle.js (248 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (248 KiB) bundle.js
WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/
Here is my webpack.config.js file:
const path = require('path');
module.exports = {
"mode": "production",
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
};
My /src/app/index.js file:
const React = require("react");
const ReactDom = require("react-dom");
class TodoComponent extends React.Component {
render() {
return (<h1>hello</h1>);
}
}
ReactDom.render(<TodoComponent/>, document.querySelector(".todo-wrapper"));
My package.json file:
{
"name": "react-tutorial",
"version": "1.0.0",
"description": "React tutorial",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
"author": "me",
"license": "ISC",
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
And my /src/index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Tutorial</title>
</head>
<body>
<div class="todo-wrapper">
</div>
<h2>Its working i guess</h2>
<script src="/app/bundle.js"></script>
</body>
</html>
The transpiled final /dist/app/bundle.js file looks like this: JsFiddle of bundle.js and is 1.7MB big.
I can see that the code part of
./node_modules/react-dom/cjs/react-dom.development.js
inside bundle.js takes most of the space.
Solutions:
After reading up on those links and using Google, I've found following solutions:
- Ignore these messages with performance hints false
- minimize and uglify the code Split and/or lazy load the code
Issue with the solutions:
Since I just started learning about React and Webpack, I don't feel comfortable having a such big bundle.js file with just a couple of lines in index.js. Is there some gap that I'm missed out or is this the normal case that using React is by default this big and Webpack has to live with it?
I really hope somebody can bring light to this because I've been trying to put my mind at peace on this since yesterday. Gladly to provide more information if needed. Thanks!
