Difference between npm run dev and npm run production

Question

I am very new in Laravel and vue.js.Please let me know what is the difference between npm run dev and npm run production.Is this something related with the environment?

Answer 1

npm run dev creates a source map and doesn't minify your js/css which makes it easier to debug and find errors out

npm run production on the other hand does not create a source map and minifies all your js/css files so that they are ready for production and are faster to read by the system.

Generally you would want to use npm run dev when you're developing the site, and npm run production when it's ready to be deployed.

Answer 2

Those are aliases defined on the package.json to execute scripts

Here are the aliases and respective commands with parameters.

 scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

We see two differences in parameters between two commands here

for dev/development it is

NODE_ENV=development --progress

While for production it is

NODE_ENV=production --no-progress

This means when dev command is run the node environment is set to development and when prod is run node environment is set to production. Additionally progress is not shown in production while shown on development command.

The default tasks will be different based on the environment. Also you can use it to customize your own tasks on webpack.mix.js file something like this

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

//run this task if the environment is not in production
if(!mix.inProduction()) {
   mix.sourceMaps();
   mix.webpackConfig({ devtool: 'inline-source-map'})
}

Webpack

The actual difference between development and production is optimization. For production the build time will be more compared to development as some optimization tasks will be done only for production, this will minify the code as well. In Laravel by default Laravel mix is used to configure it easily. The underlying is handled by webpack. From the webpack documentation here you can check actually what are the differences between two environments and environment specific tasks.

Build performance develpment vs production