El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Construcción para Producción

Siguiente ►
►

En este módulo, aprenderemos cómo preparar y optimizar una aplicación Vue.js para su despliegue en un entorno de producción. Este proceso incluye la configuración de herramientas de construcción, la optimización del rendimiento y la minimización del tamaño del paquete.

  1. Introducción a la Construcción para Producción

¿Por qué es importante la construcción para producción?

  • Optimización del rendimiento: Las aplicaciones deben cargarse rápidamente y ser eficientes en el uso de recursos.
  • Minimización del tamaño del paquete: Reducir el tamaño de los archivos para mejorar los tiempos de carga.
  • Eliminación de código innecesario: Remover código de desarrollo y depuración que no es necesario en producción.

  1. Configuración de Webpack

Vue CLI utiliza Webpack para la construcción de aplicaciones. Webpack es una herramienta de construcción que empaqueta módulos JavaScript con sus dependencias.

Configuración básica de Webpack

La configuración de Webpack se encuentra en el archivo vue.config.js. Aquí hay un ejemplo básico:

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
};

Explicación del código

  • configureWebpack: Permite modificar la configuración de Webpack.
  • optimization.splitChunks: Divide el código en varios archivos para optimizar la carga.

  1. Minificación y Compresión

Minificación

La minificación reduce el tamaño de los archivos eliminando espacios en blanco, comentarios y otros caracteres innecesarios.

// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: [new TerserPlugin()],
    },
  },
};

Compresión

La compresión reduce aún más el tamaño de los archivos utilizando algoritmos como Gzip.

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
};

Explicación del código

  • TerserPlugin: Plugin para minificar archivos JavaScript.
  • CompressionWebpackPlugin: Plugin para comprimir archivos utilizando Gzip.

  1. Eliminación de Código de Desarrollo

Eliminación de Consolas y Depuraciones

Es importante eliminar las declaraciones de console.log y otros métodos de depuración.

// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: [new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      })],
    },
  },
};

Explicación del código

  • drop_console: Configuración de Terser para eliminar todas las declaraciones de console.

  1. Configuración de Variables de Entorno

Variables de Entorno

Las variables de entorno permiten configurar diferentes comportamientos para desarrollo y producción.

// .env.production
VUE_APP_API_URL=https://api.production.com

Uso de Variables de Entorno en el Código

// src/main.js
console.log(process.env.VUE_APP_API_URL);

Explicación del código

  • .env.production: Archivo de configuración para variables de entorno en producción.
  • process.env.VUE_APP_API_URL: Acceso a la variable de entorno en el código.

  1. Ejercicio Práctico

Ejercicio

  1. Configura un proyecto Vue.js para producción.
  2. Minifica y comprime los archivos.
  3. Elimina las declaraciones de console.log.
  4. Configura una variable de entorno para la URL de la API.

Solución

  1. Crear un archivo vue.config.js con la configuración de Webpack.
  2. Añadir los plugins de minificación y compresión.
  3. Configurar Terser para eliminar las declaraciones de console.log.
  4. Crear un archivo .env.production con la variable de entorno.
// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: [new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      })],
      splitChunks: {
        chunks: 'all',
      },
    },
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
};
// .env.production
VUE_APP_API_URL=https://api.production.com
// src/main.js
console.log(process.env.VUE_APP_API_URL);

  1. Conclusión

En esta sección, hemos aprendido cómo preparar una aplicación Vue.js para su despliegue en producción. Hemos cubierto la configuración de Webpack, la minificación y compresión de archivos, la eliminación de código de desarrollo y la configuración de variables de entorno. Estos pasos son esenciales para asegurar que tu aplicación sea rápida, eficiente y esté lista para ser utilizada por los usuarios finales.

En el siguiente tema, abordaremos el despliegue de aplicaciones Vue.js, donde aprenderemos cómo poner en línea nuestra aplicación optimizada.

◄ Anterior
◄
Siguiente ►
►

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados