Optimización del empaquetado del paquete web vue-cli3 para mejorar el rendimiento del sitio web

Recientemente, para mejorar el rendimiento del sitio web, hemos considerado la optimización del empaque. Cuanto más pequeño sea el paquete cargado, más rápida será la respuesta del servidor. Webpack, un artefacto de empaque, no se ha estudiado a fondo. Así que aprende.

La optimización del empaque se considera generalmente a partir de los siguientes aspectos:

Uno, compresión de código

1. Eliminar  .map archivos

.map  La función del archivo: después de empaquetar el proyecto, el código se comprime y encripta. Si se informa un error durante el tiempo de ejecución, el mensaje de error de salida no se puede saber con precisión dónde el código informó el error. 
Con esto,  .map  puede ser como un código no cifrado para generar con precisión qué fila y columna son incorrectas.

operando:

module.exports = {
  // ...
  productionSourceMap: false,
}

Dos, carga bajo demanda

Tres, compresión de imagen

 

Referencia 1: https://www.jianshu.com/p/11c1d85ccd71

Referencia 2: https://blog.csdn.net/weixin_33970449/article/details/91367865  [Extracción de código público, use cdn para cargar]

Referencia 3: https://segmentfault.com/a/1190000021477337

Referencia 4: https://www.jianshu.com/p/5e9c78a6a960  [Imágenes comprimidas y js, css]