I'm using React JS and when I build my app to deploy, I use react-scripts as follow below:
react-scripts build
And my chunk files are something like:
0.cebdafcf.chunk.js
1.fa48de00.chunk.js
2.98b9bea7.chunk.js
...
52.9ca2408d.chunk.js
App.7b21e172.chunk.js
dashboards.f6142b89.chunk.js
user-forgot-password.06d87a22.chunk.js
views.16dc12b2.chunk.js
...
But every time I build, the hash suffix are the same, for example, I'd like every build change the hash for App..chunk.js
Is there any way to do it?
I've tried the option described here: Github Renamer Answer, using the lib renamer, but it didn't work to update the hash name for all chunk files.
Thank you in advance for helping
What I've done to solve was: First of all, I had to eject react so on this way I had access to change the webpack.config and after I've changed on webpack.config everything with
[contenthash:8]
to
[contenthash]
So, on this way, everytime we have a change on the file, the hash config chunk will be different. And for me, it's enough.
I don't know if someone has another solution, better or simpler. If yes, post to help other people.
Related
Simple question,
I have the following environment variables:
REACT_APP_API_URL=http://localhost:1234
Although this evaluates to undefined?
console.log(process.env.REACT_APP_API_URL)
Using create-react-app, from their documentation this is all I need to do? .env file is in the root directory, react even re-compiled when I changed it.
I believe you have to include your environment variables in global process.env. For this you can use some sort of package like dotenv.
This blog link would be helpful. https://trekinbami.medium.com/using-environment-variables-in-react-6b0a99d83cf5
inside your app can you try to console.log it like this?
const {REACT_APP_API_URL} = process.env;
console.log(REACT_APP_API_URL)
Grabbed from here:
https://adostes.medium.com/using-environment-variables-in-a-react-application-ac3b6c307373
Can you provide some screenshots? It seems to work fine for me. Please see the below screenshots.
Make sure you have the .env file in your root folder (same as where package.json is) and not in /src. Then double check that you have restarted the server (kill the npm start and start again). If it's not that, you will have to share more information, because it doesn't seem to be anything wrong in the few bits of information you have shared.
I'm following the recommendation to import individual components from react-bootstrap, like so import Container from "react-bootstrap/Container";. I've verified the whole codebase and every single import is the same. Yet, when I analyze the bundle, it shows that react-bootstrap has been bundled in its entirety.
Any ideas what I could be missing?
Upon further investigation, I found that react-bootstrap-dialog was importing the whole of react-bootstrap. If you're here because of this same issue, I suggest you open package-lock.json and search for any libraries that depend on the unshakeable library, that's the one you should potentially replace.
Note: Answer provided by OP
I think that the answer given is correct, but it is not the only way. package-lock.json would be another file, I suggest you use the same one.
Hope I helped
Thank You :)
I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)
I am currently looking into React, React-habitat, and Webpack.
My question is does Webpack also bundle the index.html file where I reference the bundle or is this kept separate? Is it possible to exclude this without specifically stating this in the Webpack config file?
this is the current structure am envisioning.
https://imgur.com/a/98or9
I know that all the dependencies found in my entry file for Webpack are bundled. The reason I would like to know this is because I am doing some research on how a CMS can be built around the three topics I mentioned above. I need to know if the index.html file is also bundled or not because I would like to edit the original index file(if it is not bundled) instead of repackaging everything for every change.
Hope someone understands what am looking for.
I read various answers like this regarding reducing the bundle size. First I wanted to understand what is going on with my 13MB bundle, so I've installed the Webpack Bundle Size Analyzer. It generated this output:
There are a few things I don't understand:
Why is react appearing twice with two different sizes?
How come it doesn't add up to 13MB? (it's around 4.75MB)
Does this means my own code is only 4KB? (last line)
Is it possible to understand from this tree how to save KBs? I mean, for instance, is there a way to use only parts of lodash or is it required as a whole by React?
Update:
Found the answer for #1. React-color requires ReactCSS which requires a different version of react and lodash. Without React-color my bundle dropped from 13MB to 8MB. I will try to find a way to re-use react and lodash.
It seems that you have eval-source-map devtool option in your webpack config file, that's why you are getting such huge bundle size. This way, sourcemaps are putting inside of bundle js file.
Try to change this option to source-map to build source maps separately.
// webpack.config.js
{
devtool: 'source-map',
// ... other options
}
1) Sometimes other dependencies require again lodash and / or react, so these dependencies are pulled in multiple times by webpack (usually happens when the version differs), here the DedupePlugin should help. The final bundle size also depends on your devtool entry in webpack, so in development it is usually much bigger as you probably have sourcemaps enabled and a your build is not optimized. Hard to tell without your actual webpack config.
2) Maybe webpack is already deduping?
3) last line says 400KB
4) You can definitely save a few kbs. A good way to start is using lodash-webpack-plugin with babel-plugin-lodash, this will import only the lodash methods you are actually using instead of the complete library. You can also just require the bits you need from material-ui as outlined in this answer.
I recently added the webpack-dashboard to my webpack config, so I instantly see the output and percentages that make up my bundle size, so maybe you think twice about adding huge dependencies if you don't really need them.