It's the first time I'm using next.js and I've experienced some issues like warnings in the console that makes me lose some time looking for the origin of them and in the end if I delete the cache and re-run next dev again, the issue simply disappear.
I expected to have any cli arg such --no-cache that we can use with Parcel or maybe any configuration inside next.config.js but there's nothing in the documentation about generally disabling cache.
I was then thinking about editing the webpack config through next.config.js like:
module.exports = {
webpackDevMiddleware: (config) => {
// options
}
}
But I really don't know if this will collide with any next requirement or if it breaks good practices and can cause any future issue.
Is then possible to avoid cache during development?
By the way, can/should I try to add a --no-source-map-like modifier for production build in Next regarding the client output?
As extra information I created the app using npx create-next-app.
Related
I work with an SEO consultant for SEO optimizations and faster page loading. He said that too many individual JS is being called. This will delay the loading of the site. For this, it is the right alternative to make a single BUNDLE. i need to do it as 1 or 2 BUNDLE must OPTIMIZE according to which one gives better performance. my hierarchy and chucked js as follow after build ; I also searched about webpack but I could not adapt the codes I found, as follow the page of next js related to webpack. I added this and nothing changed.
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
// Important: return the modified config
return config
},
}
I also use next js for server side rendering. Other picture shows my structure in the react project and i think i should refer config to index js. maybe. How i should forward to solve my problem ? If you need any other information, i will try to write it.
Hi i'm using React Native Code Push currently.
Currently my code is manually handling it because of the need to prevent it from codepushing builds that are in the staging / testing environment. I had a problem earlier when i did a release build for testing, it still picked up the codepush and it refreshed incorrectly.
What is everyone else doing? I can make the codepushoptions on app resume but it'd still pick up the codepush bundle on my staging environments when i only want it on production :/
I considered the staging, and production environments in codepush but that part is quite confusing. not sure if its used at all.
let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
And in the code
if ((!(__DEV__)) && (API_BASE_URL === 'https://production.xxx')) { // only run in production
codePush.sync({
updateDialog: null,
installMode: codePush.InstallMode.ON_NEXT_RESTART
},
eh i found that i'd just set different keys per environment and codepush will handle that way.
https://www.youtube.com/watch?v=waatVm6-bX4
Actually, I know my question is s weird but really confused me. lodash functions are awesome and using them is a safe way to have a secure and clean code but in my react project when I use get function of lodash, in the development environment it works well as every developer expected.
import get from 'lodash/get';
const hostname = get(window, 'location.hostname');
// => returns the current hostname
But after I run yarn build && yarn start to make a production build of my ReactJS app and run it, its behavior is changed and returns undefined.
import get from 'lodash/get';
const hostname = get(window, 'location.hostname');
// => returns undefined
So in the production build, I try the get(window, 'location') and it returns the location object. but when I put a key of location the lodash get function returns undefined.
Actually, in the production and just for nested it returns undefined
Due to this issue, I just found this post, but no one answer it.
According to this comment I became passionate about testing my production build. So I listed all thing That happens on the production build of my project that maybe causes this issue.
At first, I doubted to babel plugins that I used for transpile, but none of them affect just on production, they affect for whole environments.
And at last, I find LodashModuleReplacementPlugin. this plugin causes this issue.
Based on its doc:
Deep property path support for methods like _.get, _.has, & _.set.
This plugin omit the deep path support on lodash get. That's the point.
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.
Recently, I downloaded mern.io. The nice thing is they have bundled everything for me. But I am kind of lost. In my last project whenever I changed something on client I could refresh browser and see the changes. With MERN I always see:
webpack building...
webpack built e9c15d7d435381a63771 in 1043ms
At first it was replacing the code on client. Now, I can't make it to propagate changes any more.
Maybe it's an issue with https://github.com/gaearon/react-hot-loader
What am I missing?
Do I have to clean the webpack or caches somehow?
EDIT
The config files can be seen here: https://github.com/Hashnode/mern-starter
The webpack ones are webpack.config.*.js
EDIT 2
The computer restart helped me but only for the first load of the page. I have found this message in the console:
XMLHttpRequest cannot load http://0.0.0.0:8000/50d9888579520587227e.hot-update.json
Which led me here: https://github.com/gaearon/react-hot-loader/issues/56