So this is my task:
gulp.task('prod', function() {
browserify({entries: [
'resources/assets/js/app.js'
]})
.transform("babelify")
.transform(envify({
NODE_ENV: 'production'
}))
.bundle()
.pipe(source('all.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest('public/js/'));
});
yet the console still sais:
all.js:30 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See [url here that stack doesn't like] for more details.
So I am confused. Whats the deal?
When running build process, set NODE_ENV like this (linux):
NODE_ENV=production gulp build
Or (Windows)
SET NODE_ENV=production
gulp build
If you added build script to your package.json - you can run npm:
npm run --production build
Or you can try to modify your scrips:
...
.transform(envify({
'process.env.NODE_ENV': 'production'
}))
...
But this depends on what version of envify you are using
You should use minified react version for production bundles. Minifying by yourself react code is not a solution, because there are many conditions like: process.env.NODE_ENV !== 'production' in it.
You can take a look here:
We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.
So you should use react.min.js from /node_modules/react/dist instead of /node_modules/react/lib/React for production bundles.
Related
I have a big project which I was trying to reduce in size using webpack-p according to here: https://hackernoon.com/reduce-webpack-bundle-size-for-production-880bb6b2c72f
I could not run it as I was encountering problems when running webpack -p (it threw an error on every function of index.js
I thought it might be something with my packages. I decided to create new create-react-app and run the command there. To my surprise, there I get the same error:
What might be the problem here?
If your app uses webpack v4 you must use webpack --mode=production instead of webpack -p.
Possible values for mode are: none, development or production.
Another usage:
// webpack.config.js
module.exports = {
...
mode: 'production',
...
}
You don't have a config file because the command you are trying to run is global, it is not getting from your current working directory. Run npm run build instead, which does that under the hood, but has a lot of other things created by the contributors of create-react-app.
You could pass a config file for the global webpack cli, but you don't have access for that in your folder since it is "not" available for your. npm run build also already applies a lot of optimizations for you.
I am doing server side rendering inside my react app. Inside of app I have a few pictures so i have loder for them inside webpack-config
{
test: /\.(gif|png|jpg)$/,
loader: 'file-loader?name=assets/img/[name].[hash].[ext]',
},
If I run my code this way
cross-env NODE_ENV=production webpack --optimize-minimize --config webpack.config.prod.js,
I get an error
Warning: Prop `src` did not match. Server: "assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg" Client: "/assets/img/profilna.1b1788096b2a10afe508dff672e50072.jpg"
but if I run it like this
cross-env NODE_ENV=production webpack --p --config webpack.config.prod.js,
everything is good and functions perfectly like I want.
Why is that?
As I read -p is equivalent of
webpack --optimize-minimize --define process.env.NODE_ENV="'production'"
Since I am already setting production enviroment I don't need --define
cross-env NODE_ENV=production
with this, you are setting Node process.env.NODE_ENV but is not "being passed" or used - while bundling - inside the app. Basically, you need to create global variables for the app and set NODE_ENV to what you need by webpack. And this is what...
--define process.env.NODE_ENV="'production'"
...does. It will use Webpack DefinePlugin to set global process.env.NODE_ENV to be used while bundling the app.
I know this sounds a little bit unclear, I struggled to understand it myself but hopefully, documentation will clear that out.
Technically, NODE_ENV is a system environment variable that Node.js
exposes into running scripts. It is used by convention to determine
dev-vs-prod behavior by server tools, build scripts, and client-side
libraries. Contrary to expectations, process.env.NODE_ENV is not set
to "production" within the build script
See "Specifying the environment" for an example.
I receive this errors from react and redux when I tried to deploy my test app. But these errors don't appear on my local machine.
But then I realized that my local machine is not using the minified version of the bundle (but my deployed app is using the minified version), so I minified the bundle, then boom! the errors appeared. Any idea why this happens and how it can be fixed?
Thanks in advance for those who would help.
Okay I get it.
So when minified, react is looking for the process.env.NODE_ENV and checking whether it is set to production. there are two solutions for this:
Solution one
The easiest way of doing this (if you're using webpack, which is, I am) is to run webpack --define process.env.NODE_ENV='\"production\"' which will take care of it for you.
Solution two
is to add these on your plugins in your webpack.config.js file.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
Just trying to make sure I am setting up my preact js correct for production.
In my webpack setup with preact, and run npm run build I notice with Bundle Analyzer Plugin the path for the preact js file is
/node_modules/preact/dist/preact.js and not
/node_modules/preact/dist/preact.min.js
I have uglify and minify js set up as well, but just thought it was curious that the minified package is not picked up ?
Entry script within webpack
entry: { app: './src/index.js', vendor: [ 'preact', 'preact-router' ] },
Npm Run build script
"build": "cross-env NODE_ENV=production webpack --progress -p --display-modules --display-chunks"
The default main for preact is dist/preact.js - preact.min.js is there for people who want to take advantage of minification when not applying their own (people hotlinking it off a CDN, for example), and to measure real-world output size.
You're already applying UglifyJS to your bundle by running webpack with the -p flag, so you needn't worry too much about trying to use dist/preact.min.js. It could save a few bytes, but nothing major. The file you're using (dist/preact.js) is actually already run through UglifyJS by Preact, it's just not compressed but not mangled (so the variable names remain intact).
Is there any way to get jspm bundle-sfx to build without setting NODE_ENV to production? I'd like to set it to development for better error messages (specifically with React, which is defaulting to some 'minimized' production mode).
Have tried this with no results:
NODE_ENV=dev `npm bin`/jspm bundle-sfx [...]
jspm 0.17 will do this by default with the jspm build command (which replaces jspm build-sfx in 0.16) automatically treating it as a production build. jspm build --dev is then the way to do development-specific builds. I'd suggest trying the upgrade path if you can - the Beta release is quite stable at this point. See http://jspm.io/0.17-beta-guide/index.html for more info.