Esta es la respuesta más completa que te podemos compartir, sin embargo estúdiala pausadamente y analiza si se puede adaptar a tu trabajo.
Solución:
npm run dev crea un mapa de origen y no minimiza su js/css, lo que facilita la depuración y la detección de errores
npm run production por otro lado, no crea un mapa de origen y minimiza todos sus archivos js/css para que estén listos para la producción y el sistema los lea más rápido.
En general, querrás usar npm run dev cuando estés desarrollando el sitio, y npm run production cuando esté listo para ser implementado.
Esos son alias definidos en el package.json para ejecutar guiones
Aquí están los alias y los respectivos comandos con parámetros.
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"
,
Vemos dos diferencias en los parámetros entre dos comandos aquí
para desarrollo/desarrollo es
NODE_ENV=development --progress
Mientras que para la producción es
NODE_ENV=production --no-progress
Esto significa que cuando se ejecuta el comando dev, el entorno del nodo se establece en desarrollo y cuando se ejecuta prod, el entorno del nodo se establece en producción. Además, el progreso no se muestra en producción mientras se muestra en el comando de desarrollo.
Las tareas predeterminadas serán diferentes según el entorno. También puede usarlo para personalizar sus propias tareas en webpack.mix.js presentar algo como esto
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')
paquete web
La diferencia real entre desarrollo y producción es la optimización. Para la producción, el tiempo de compilación será mayor en comparación con el desarrollo, ya que algunas tareas de optimización se realizarán solo para la producción, lo que también minimizará el código. En Laravel, por defecto, se usa Laravel mix para configurarlo fácilmente. El subyacente es manejado por webpack. Desde la documentación del paquete web aquí, puede verificar cuáles son las diferencias entre dos entornos y tareas específicas del entorno.
Construir rendimiento desarrollo vs producción
Si tienes alguna indecisión o capacidad de progresar nuestro tutorial te evocamos realizar una explicación y con deseo lo analizaremos.