Vue: velocidad de compilación del proyecto, optimización del rendimiento, optimización del volumen de empaquetado

Vista previa en línea de la dirección de demostración de GitHub

documentación china del paquete web

Artículo:
Métodos de optimización de proyectos y ventajas y desventajas
Configuración de HardSourceWebpackPlugin y otras soluciones de optimización
Intercambio de soluciones de optimización del rendimiento del proyecto Vue Qué
pueden hacer los proyectos vue-cli para optimizar
la velocidad de carga de la primera revisión de Vue y la optimización del tiempo de pantalla blanca explicación detallada

¿Cuáles son las diferencias entre webpack5 y webpack4?
Guía de actualización de Webpack5 (con una guía completa de optimización del rendimiento del paquete)

secuencia

Personalmente creo que es bueno elegir el plan de optimización adecuado, no es necesario utilizarlos todos, puedes dedicar más tiempo a optimizar el código de negocio.
El entorno del proyecto se basa en webpack4x, algunos pueden estar desactualizados, juzgue usted mismo
下面的方法只有部分使用，更多的是一种记录！！！

Verifique la versión del paquete web. npm list webpack
O puede encontrar el archivo webpack/package.json en el directorio node_modules y verificar la versión en el archivo, como se muestra a continuación.

1. Optimización de la velocidad de compilación

Artículos sobre optimización de compilación:
La compilación y ejecución de proyectos Vue son demasiado lentas. Cómo mejorar la velocidad de compilación (la compilación incluye la compilación en ejecución y la compilación de paquetes).
Durante el proceso de desarrollo, los proyectos Vue se guardan y compilan lentamente. Método de optimización
webpack5. Configurar multi -threading y almacenamiento en caché para acelerar la compilación.

1. Usar caché

• Para mejorar la velocidad de compilación en webpack3, a menudo usamos los complementos DllPlugin y DllReferencePlugin, pero la configuración es complicada y la actualización de archivos requiere la regeneración manual del dll, lo cual es más engorroso. Hay otro tipo de complemento webpack autodll que será mejor
• Se puede usar después del paquete web 4. HardSourceWebpackPluginMejora la velocidad de compilación y carga configurando un caché en el disco. La primera vez que se compila y se almacena en caché normalmente, y la segunda vez que se almacena en caché, puede reducir el tiempo en un 80%. 90%. Necesidad de instalar y usar.
• Configuración integrada de Webpack5 cache.

1.1. Complemento de caché-HardSourceWebpackPlugin

Dirección de GitHub del complemento hard-source-webpack-plugin

HardSourceWebpackPlugin es un complemento para webpack que proporciona un paso de almacenamiento en caché intermedio para módulos. Para ver los resultados, debe ejecutar el paquete web dos veces con este complemento: la primera compilación tomará el tiempo normal. La segunda construcción será significativamente más rápida.
La velocidad mejora aproximadamente entre un 80% y un 90%.

consejos:

Ubicación de caché predeterminada: nodemodules/.cache. Si necesita borrar el caché, puede eliminarlo y compilarlo nuevamente.
HardSourceWebpackPlugin 和 speed-measure-webpack-plugin 不能一起使用 ！！！

Instalar el complemento webpack de fuente dura

npm install --save-dev hard-source-webpack-plugin

Configuración

// webpack.config.js 或 vue.config.js
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const path = require('path')

module.exports = {
    
    
  // ...
  plugins: [
     // 默认缓存位置：node_modules/.cache路径下
     new HardSourceWebpackPlugin()
     // new HardSourceWebpackPlugin({
    
    
     //   cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/hard_source_cache')
     // })
  ]
}

1.2 webpack5Configurar caché

webpack5Mecanismo de almacenamiento en caché integrado. Simplemente configúrelo directamente.
El caché se configurará para escribir: memoria en modo de desarrollo y el caché se desactivará en modo de producción.

// webpack.config.js 或 vue.config.js
const path = require('path')
module.exports = {
    
    
  transpileDependencies: true,
  configureWebpack: {
    
    
    cache: {
    
    
      type: 'filesystem',
      // cacheDirectory: path.resolve(__dirname, '.webpack_cache') // 设置缓存目录(根路径下)
      cacheDirectory: path.join(__dirname, 'node_modules/.cache/webpack_cache') // 设置缓存目录(node_modules/.cache路径下)
    }
  }
}

1.3 complemento del cargador de caché

Al igual que el primero, no entraré en detalles aquí.

Comparación antes y después de la instalación del complemento webpack de fuente dura

Primera compilación 36340ms

Segunda compilación 3760ms

2. Uso adecuado del mapa fuente

La función de ProductionSourceMap es localizar problemas. Se generará un archivo .map durante el empaquetado. En el entorno de producción, puede ver la línea específica de la información de salida en el navegador, pero el tamaño del paquete correspondiente también aumentará, lo que También afectará la velocidad de compilación. , configurarlo en falso no generará archivos .map.
Configurar ProductionSourceMap en falso no solo puede reducir el tamaño del paquete, sino también cifrar el código fuente.

module.exports = {
    
    
  productionSourceMap: false
}

3. Embalaje multihilo

3.1, cargador de hilos

El artículo
[Serie de optimización del rendimiento de Webpack (9): embalaje multiproceso] mejora en gran medida el embalaje del proyecto y la velocidad de construcción.

Thread-loader es un cargador de Webpack que puede colocar un trabajo costoso en el grupo de trabajadores y ejecutarlo en el grupo de trabajadores para mejorar la velocidad de compilación.
Por ejemplo, al crear un proyecto Vue.js, debido a la necesidad de compilar componentes de un solo archivo .vue, analizar plantillas y otras operaciones, el tiempo de compilación puede ser muy largo, especialmente para proyectos grandes. Puede utilizar el cargador de subprocesos para ejecutar estas operaciones en un grupo de trabajadores, lo que reduce significativamente el tiempo de compilación.

Cuando se utiliza, este cargador debe colocarse antes que otros cargadores. Los cargadores colocados después de este cargador se ejecutarán en un grupo de trabajadores separado.
Los cargadores que se ejecutan en un grupo de trabajadores están restringidos. Por ejemplo:
estos cargadores no pueden generar archivos nuevos.
Estos cargadores no pueden utilizar API de cargador personalizadas (es decir, no se pueden personalizar mediante complementos).
Estos cargadores no pueden obtener la configuración del paquete web.
Cada trabajador es un proceso de node.js independiente y su sobrecarga es de aproximadamente 600 ms. Al mismo tiempo, se restringirá el intercambio de datos entre procesos.
¡Utilice este cargador únicamente para operaciones que requieran mucho tiempo!

Tenga en cuenta que el cargador de subprocesos no es adecuado para todos los escenarios y solo es eficaz para algunas tareas costosas. Si la tarea en sí es muy rápida y simple, usar un cargador de subprocesos puede ser más lento que ejecutarla directamente en el subproceso principal.

Instalar

 npm install thread-loader --save-dev

El siguiente es un ejemplo del uso del cargador de subprocesos (se aplicará a todos los archivos .js y .vue, excepto a los archivos en node_modules):

paquete web.config.js

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        include: path.resolve('src'),
        exclude: /node_modules/,
        use: [
          'thread-loader', // 将后续 loader 放在 worker 池中执行
          // 耗时的 loader （例如 babel-loader）
          'babel-loader'
        ]
      }
    ]
  }
}

ver.config.js

module.exports = {
    
    
  // ... 
  configureWebpack: {
    
    
    module: {
    
    
      rules: [
        {
    
    
          test: /\.js$/,
          include: path.resolve('src'),
          exclude: /node_modules/,
          use: [
            'thread-loader', // 将后续 loader 放在 worker 池中执行
            // 耗时的 loader （例如 babel-loader）
            'babel-loader'
          ]
        }
      ]
    }
  }
}

opciones

use: [
  {
    
    
    loader: "thread-loader",
    // 有同样配置的 loader 会共享一个 worker 池
    options: {
    
    
      // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)，或者，
      // 在 require('os').cpus() 是 undefined 时回退至 1
      workers: 2,

      // 一个 worker 进程中并行执行工作的数量
      // 默认为 20
      workerParallelJobs: 50,

      // 额外的 node.js 参数
      workerNodeArgs: ['--max-old-space-size=1024'],

      // 允许重新生成一个僵死的 work 池
      // 这个过程会降低整体编译速度
      // 并且开发环境应该设置为 false
      poolRespawn: false,

      // 闲置时定时删除 worker 进程
      // 默认为 500（ms）
      // 可以设置为无穷大，这样在监视模式(--watch)下可以保持 worker 持续存在
      poolTimeout: 2000,

      // 池分配给 worker 的工作数量
      // 默认为 200
      // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
      poolParallelJobs: 50,

      // 池的名称
      // 可以修改名称来创建其余选项都一样的池
      name: "my-pool"
    },
  },
  // 耗时的 loader（例如 babel-loader）
];

3.2、paquete web paralelo

paralelo-webpack es un complemento basado en Webpack, que puede dividir la tarea de compilación en múltiples subprocesos para ejecutarlos en paralelo y mejorar la velocidad de compilación. En comparación con otros complementos similares, la característica más importante de paralelo-webpack es que admite el procesamiento paralelo de módulos asíncronos y sincrónicos, no solo limitado a Loader y Plugin.

npm install --save-dev parallel-webpack

// webpack.config.js
const ParallelWebpack = require('parallel-webpack').Plugin

module.exports = {
    
    
  // ...
  plugins: [
    new ParallelWebpack({
    
    
      // 配置选项
    }),
    /* 其他插件 */
  ],
  // ...
}

La configuración anterior permitirá que el complemento webpack paralelo logre un empaquetado multiproceso. Puede configurar el complemento según sus necesidades en las opciones de configuración.

Cabe señalar que el uso de paquetes de subprocesos múltiples puede aumentar el consumo de CPU y memoria del sistema, por lo que se recomienda hacer coincidir el número de subprocesos que coincida con el rendimiento de la máquina y probar el efecto del paquete de subprocesos múltiples. el tiempo de construcción y el proceso de construcción, el consumo de CPU y memoria.

3.3、Paquete Feliz

HappyPack es una herramienta para la compilación de subprocesos múltiples de Webpack. Puede descomponer una tarea compleja de cargador o complemento en múltiples subprocesos para su ejecución paralela para acelerar la compilación.

npm install happypack --save-dev

const HappyPack = require('happypack');

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=js'
      }
    ]
  },
  plugins: [
    new HappyPack({
    
    
      id: 'js',
      threads: 4,
      loaders: ['babel-loader']
    })
  ],
  // ...
};

En el código anterior, definimos una instancia de HappyPack llamada js y usamos 4 subprocesos para compilar los archivos JavaScript procesados ​​por babel-loader en paralelo.

注：2和3插件相关的代码没有经过实际使用测试效果！！！

4. Habilite la actualización/reemplazo en caliente

estilo de carga HMR del documento chino del paquete web

La diferencia entre la carga en caliente del paquete web usando module.hot.accept y no usando
el reemplazo en caliente del módulo (HMR)

• Actualización en caliente: después de modificar el archivo de código, el nuevo código se compila e inyecta automáticamente en el JavaScript que se ejecuta en el navegador. La actualización en caliente no recarga la página, pero actualiza algunos contenidos modificados y retiene la información de estado de la página, para que se pueda mantener el estado operativo del usuario.
• Recarga en caliente: después de modificar el archivo de código, vuelva a compilar, empaquetar y actualizar la ventana del navegador lo más rápido posible. En comparación con la actualización en caliente, la recarga en caliente no solo actualiza el código JavaScript, sino que también vuelve a representar la página completa, por lo que habrá una breve pantalla de presentación, que es más adecuada para modificaciones relacionadas con la interfaz de usuario.
• Reemplazo de módulo en caliente: similar a la actualización en caliente, pero solo reemplaza las partes cambiadas y no recarga todo el módulo o la aplicación, por lo que es más rápido y tiene una mejor experiencia. El reemplazo en caliente de módulos no solo se aplica a módulos JavaScript, sino que también se puede usar para reemplazar CSS, imágenes y otros recursos.

HotModuleReplacementPluginEs un complemento proporcionado por Webpack para habilitar la función de reemplazo de módulo en caliente (HMR). HMR es un modo de desarrollo que puede actualizar solo las partes modificadas sin actualizar toda la página, lo que mejora la eficiencia del desarrollo.

Nota:

Solo efectivo para js.
Al modificar css, la página no se actualizará automáticamente, solo se actualizará nuestro css modificado.

const webpack = require('webpack');

module.exports =  {
    
    
  // ...
  mode: 'development',
  devtool: 'eval-source-map', // 使用 source-map 方便调试
  devServer: {
    
    
    port: 8080,
    hot: true, // 开启 HMR 功能
    open: true // 自动打开浏览器
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 启用 HMR 功能
  ]
}

Entre ellos, la opción activa está configurada en verdadero, lo que significa que la función HMR está habilitada; el complemento HotModuleReplacementPlugin se agrega a los complementos para habilitar la función HMR.

Agregue el siguiente código en el código js:

// js 代码中添加 HMR 相关的代码
if (module.hot) {
    
    
  // 如果支持HMR,告诉 Webpack，当前模块更新不用刷新
  module.hot.accept()
  // 如果支持HMR,告诉 Webpack，当前模块更新时一定要刷新
  // module.hot.decline()
}

A través de la configuración anterior, puede activar la función de reemplazo en caliente del módulo de Webpack, de modo que pueda obtener una vista previa de los efectos de las modificaciones en tiempo real durante el proceso de desarrollo y mejorar la eficiencia del desarrollo. Cabe señalar que la función HMR solo está disponible en entornos de desarrollo y no debe usarse en entornos de producción.

5. Utilice la precompilación de Dll (DllPlugin/autodll-webpack-plugin)

DllPlugin es un complemento de webpack que puede empaquetar algunos códigos que cambian con poca frecuencia o bibliotecas de terceros en una biblioteca de enlaces dinámicos separada (archivo DLL), de modo que no sea necesario volver a empaquetar estos códigos cada vez que se compila, mejorando así la compilación. velocidad.

Con DllPlugin, puede precompilar algunas bibliotecas estables y difíciles de modificar, como vue, vue-router, vuex, etc., y usar los archivos de la biblioteca dll precompilados directamente durante la compilación del proyecto a través de la herramienta de compilación, de esta manera mejorando la velocidad de embalaje.

Se recomienda utilizar autodll-webpack-plugin

Es más recomendable usarlo directamente.hard-source-webpack-plugin

npm install autodll-webpack-plugin --save-dev

ver.config.js

const AutoDllPlugin = require('autodll-webpack-plugin');

module.exports = {
    
    
  // ...
  plugins: [
    new AutoDllPlugin({
    
    
      inject: true,
      debug: true,
      filename: '[name]_[hash].js',
      path: './dll',
      entry: {
    
    
        vendor: [
          'vue',
          'vue-router',
          'vuex'
        ]
      }
    })
  ]
}

En la configuración anterior, utilizamos el complemento AutoDllPlugin y pasamos los siguientes parámetros:

• inyectar: ​​verdadero significa hacer referencia automáticamente a la DLL generada en HTML;
• depurar: verdadero significa generar información de depuración en el registro del paquete web;
• nombre de archivo: '[nombre]_[hash].js' representa el nombre del archivo DLL generado, donde [nombre] corresponde a la clave en la entrada y [hash] representa el valor hash del archivo;
• ruta: './dll' indica la ruta de almacenamiento del archivo DLL generado;
• La entrada representa una lista de bibliotecas de terceros que se compilarán en DLL.

La configuración anterior generará un archivo DLL llamado proveedor_XXXX.js, donde XXXX representa el valor hash del archivo. Este archivo contiene el código de las tres bibliotecas vue, vue-router y vuex.

Agregue el siguiente código en HTML para hacer referencia al archivo DLL generado, donde XXXX debe reemplazarse con el hash del archivo DLL generado.

<script src="./dll/vendor_XXXX.js"></script>

Si utiliza webpack-dev-server para el desarrollo, debe agregar el siguiente contenido a la configuración de DevServer:
De esta manera, después de iniciar DevServer, autodll-webpack-plugin introducirá automáticamente la DLL generada en HTML, mejorando así la velocidad de compilación. .

const AutoDllPlugin = require('autodll-webpack-plugin');

module.exports = {
    
    
  // ...
  devServer: {
    
    
    // ...
    before(app, server) {
    
    
      AutoDllPlugin({
    
    
        debug: true,
        filename: '[name]_[hash].js',
        path: './dll',
        entry: {
    
    
          vendor: [
            'vue',
            'vue-router',
            'vuex'
          ]
        }
      }).apply(new webpack.Compiler());
    }
  }
}

6. Optimizar el cargador

El cargador es una parte importante del paquete web y su procesamiento de archivos puede afectar la velocidad de compilación. La optimización de la configuración del cargador puede mejorar enormemente la velocidad de compilación.

• Reduzca la cantidad de cargadores: evite el uso repetido de cargadores tanto como sea posible, o combine varios cargadores tanto como sea posible si es necesario, reduciendo así la cantidad de cargadores que deben compilarse.

• Almacene en caché los resultados de la compilación del cargador: utilice el complemento del cargador de caché de Webpack para almacenar en caché los resultados de la compilación del cargador en el disco duro, lo que puede acortar en gran medida el tiempo de recompilación del cargador sin cambiar el archivo fuente.

• Habilite la compilación de subprocesos múltiples: utilizando herramientas de compilación de subprocesos múltiples, la tarea de construcción del paquete web se puede descomponer en múltiples subprocesos para su ejecución en paralelo, lo que puede aprovechar al máximo la computación paralela de múltiples núcleos de la CPU y acelerar la compilación. Esto se puede lograr utilizando herramientas como happyPack o thread-loader.

• Evite el uso de expresiones regulares como reglas del cargador: al definir las reglas del cargador, intente evitar el uso de expresiones regulares como método de coincidencia de reglas, ya que esto ralentizará el proceso de compilación. Si debe usarlo, también puede intentar limitar el rango de coincidencia de la expresión regular para mejorar la eficiencia de la coincidencia.

7 、 excluir e incluir

El uso de exclusión e inclusión en proyectos de Vue puede ayudar a mejorar la velocidad de compilación porque pueden reducir la verificación y compilación de archivos innecesarias.

excluir e incluir se configuran a través del elemento de configuración module.rules del paquete web. Entre ellos, excluir significa excluir ciertos directorios o archivos de la compilación, mientras que incluir significa incluir ciertos directorios o archivos para la compilación.

A continuación se toma la compilación de Babel del proyecto Vue como ejemplo para presentar cómo utilizar la exclusión y la inclusión.

Instalar dependencias

npm install --save-dev babel-loader @babel/core @babel/preset-env

Entre ellos, babel-loader es una herramienta para compilar código JavaScript, @babel/core es la biblioteca principal de Babel y @babel/preset-env es un paquete preestablecido que puede seleccionar automáticamente complementos de conversión según el entorno de destino.

Configurar webpack.config.js

En la siguiente configuración, excluir: /node_modules/ significa excluir los archivos JavaScript en el directorio node_modules de la compilación para mejorar la velocidad de compilación.

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
    
    
          loader: 'babel-loader',
          options: {
    
    
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

A veces, si solo necesitamos compilar archivos JavaScript en un determinado directorio del proyecto, podemos usar include para especificar el directorio correspondiente.

Por ejemplo, solo necesitamos compilar los archivos JavaScript en el directorio src/components, podemos cambiar la configuración a:

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.js$/,
        include: path.resolve(__dirname, 'src/components'),
        use: {
    
    
          loader: 'babel-loader',
          options: {
    
    
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

En la configuración anterior, incluir: path.resolve(__dirname, 'src/components') significa que solo los archivos JavaScript en el directorio src/components se incluyen para la compilación para reducir la verificación y compilación innecesaria de archivos.

8. Construir un entorno diferenciado

Por ejemplo, en el entorno de desarrollo, normalmente necesitamos habilitar funciones como el mapa fuente y la actualización en caliente, mientras que en el entorno de producción, necesitamos habilitar tecnologías de optimización como la compresión de código y Tree Shaking. Por tanto, podemos utilizar el siguiente código en el archivo de configuración de Webpack para configurar diferentes complementos y optimizaciones según el entorno:

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
    
    
  // ...
  plugins: [
    isProd ? new UglifyJSPlugin() : null,
    // ...
  ].filter(Boolean),
};

9. Mejorar la versión del paquete web

Actualizar la versión de Webpack es una forma importante de mejorar la velocidad de compilación y cada nueva versión traerá nuevas optimizaciones y mejoras de rendimiento.

Actualice Webpack a la última versión:
primero, debe determinar la versión de Webpack utilizada actualmente y verificar si es necesario actualizarla. Puede instalar la última versión de Webpack a través del comando npm:

npm install webpack@latest --save-dev

Precauciones:

• Verifique las versiones de los complementos y cargadores relacionados con Webpack:
  al actualizar Webpack, también debe verificar si los complementos y cargadores relacionados deben actualizarse y asegurarse de que sean compatibles con la versión de Webpack.

• Eliminar complementos y cargadores obsoletos:
  es posible que algunos complementos y cargadores hayan quedado obsoletos con la actualización, por lo que es necesario eliminar los complementos y cargadores correspondientes.

2. Optimización del volumen de embalaje

Complemento de análisiswebpack-bundle-analyzer

Primero, recomendamos un complemento de análisis. El uso de este complemento puede abrir una página de análisis durante la compilación y el empaquetado, lo que puede ayudarnos a optimizar el tamaño del archivo y el rendimiento después del empaquetado.
Puede generar un informe visual que muestra el tamaño, las dependencias y la composición de cada módulo. A través de este informe, podemos comprender claramente el tamaño y las dependencias de cada módulo, determinando así qué módulos contribuyen más al tamaño de los resultados empaquetados y luego optimizarlos.

Configuración del complemento webpack-bundle-analyzer

Instalar webpack-bundle-analyzercomplemento

npm install --save-dev webpack-bundle-analyzer

Uso de complementos en archivos de configuración de Webpack

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    
    
  // ...
  plugins: [
      new BundleAnalyzerPlugin({
    
    
        openAnalyzer: true
      }),
  ]
}

vue cli 生成的项目下面的就不需要了，直接编译打包会打开一个分析页面

Ejecute la compilación de Webpack
Ejecute el comando de compilación de Webpack, por ejemplo:

webpack --config webpack.config.js

Ver informe de análisis
Después de ejecutar el comando anterior, se generará una página de informe y el número de puerto se imprimirá en la consola, por ejemplo:

Webpack Bundle Analyzer is started at http://127.0.0.1:8888

Abra la dirección correspondiente en su navegador para ver el informe de análisis.

Cabe señalar que si su configuración de compilación se genera en función de herramientas como Vue CLI o Create React App, no necesita agregar manualmente el complemento webpack-bundle-analyzer. Estas herramientas ya incluyen el complemento de forma predeterminada. . Puede compilarlo y empaquetarlo directamente o ver el informe de análisis mediante el comando correspondiente, por ejemplo:

vue-cli-service build --mode production --report

1. Consultar bibliotecas de terceros bajo demanda

1.1, referencia bajo demanda de element-ui

La lista completa de componentes está sujeta a componentes.json (versión referenciada)

• Paso 1: instale el complemento babel-plugin-component:

npm i babel-plugin-component -D

• Paso 2: Configurar en babel.config.jso archivo:.babelrc

module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', {
    
     'modules': false }]
  ],
  plugins: [
    [
      'component',
      {
    
    
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

• Paso 3: crear elemento.js

// element-ui 按需引入
// 注：完整组件列表以 components.json （引用版本的）为准
// https://github.com/ElemeFE/element/blob/master/components.json

import {
    
    
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Avatar,
  Drawer,
  Popconfirm,
  // 单独设置
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui'

const components = [
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Avatar,
  Drawer,
  Popconfirm
]

const element = {
    
    
  install: (Vue) => {
    
    
    components.forEach(component => {
    
    
      Vue.component(component.name, component)
    })

    // 单独设置
    Vue.use(Loading.directive)
    Vue.prototype.$loading = Loading.service
    Vue.prototype.$msgbox = MessageBox
    Vue.prototype.$alert = MessageBox.alert
    Vue.prototype.$confirm = MessageBox.confirm
    Vue.prototype.$prompt = MessageBox.prompt
    Vue.prototype.$notify = Notification
    Vue.prototype.$message = Message
  }
}
export default element

• Paso 4: referencia a main.js (el método de referencia cambia de hacer referencia a componentes oficiales a hacer referencia a element.js personalizado)

// import ElementUI from 'element-ui' // 全局引用
import ElementUI from '@/utils/element' // 按需引用
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Puedes usarlo normalmente después de eso.

1.2 Echart cotizado bajo demanda

Cree un archivo echart.js directamente aquí y luego haga referencia a él donde necesite usarlo. El
método de referencia cambia de hacer referencia a componentes oficiales a hacer referencia a echarts.js personalizado.

// import * as echarts from 'echarts' // 全量引入
import echarts from '@/utils/echarts' // 按需引入

archivo echart.js

// echarts 按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'

// 引入图表类型，图表后缀都为 Chart
import {
    
     BarChart, LineChart, PieChart } from 'echarts/charts'
// 自定义类型的图表
import {
    
     CustomChart } from 'echarts/charts'

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    
    
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  DataZoomComponent
} from 'echarts/components'

// 标签自动布局、全局过渡动画等特性
import {
    
     LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import { CanvasRenderer } from 'echarts/renderers'
import {
    
     SVGRenderer } from 'echarts/renderers'

// 将以上引入的组件使用use()方法注册
echarts.use([
  BarChart,
  LineChart,
  PieChart,
  CustomChart,
  // 提示框，标题，直角坐标系，数据集 等组件
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  DataZoomComponent,
  // 标签自动布局、全局过渡动画等特性
  LabelLayout,
  UniversalTransition,
  // Canvas 渲染器
  // CanvasRenderer
  SVGRenderer
])

// 导出
export default echarts

1.3 Lodash cotizado a pedido

Método 1: utilice 'lodash-es' en lugar de 'lodash'

import {
    
     cloneDeep } from 'lodash-es' // 按需引入
import {
    
     throttle, debounce } from 'lodash-es' // 按需引入
// import lodash from 'lodash-es' // 全量引入

Método 2: preste atención a las referencias bajo demanda cuando utilice 'lodash'

// import cloneDeep from 'lodash/cloneDeep' // 按需引入
// import lodash from 'lodash' // 全量引入

2. Eliminar console.log en el entorno de producción.

El entorno de desarrollo requiere depurar y agregar registros de consola. Si también se imprime en el entorno de producción, fácilmente provocará fugas de datos y ocupará espacio.

2.1 、babel-plugin-transform-remove-console

Este es un complemento de Babel que elimina todas las declaraciones de console.* durante la compilación.

npm install --save-dev babel-plugin-transform-remove-console

Luego, agregue el siguiente código en el archivo babel.config.jso :.babelrc

const plugins = []
// remove console.* in production
if (process.env.NODE_ENV === 'production') {
    
    
  plugins.push('transform-remove-console')
  // plugins.push(['transform-remove-console', { 'exclude': ['error', 'warn'] }])
}

module.exports = {
    
    
  //...
  plugins: plugins
}

2.2 、terser-webpack-plugin

Este complemento se utiliza para comprimir código js. Tiene la función de eliminar console.log. Debe
webpack4descargar e instalar terser-webpack-pluginel complemento y se requiere la siguiente configuración:

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require('terser-webpack-plugin')
 
module.exports = {
    
     
// ...other config
optimization: {
    
    
  minimize: !isDev,
  minimizer: [
    new TerserPlugin({
    
    
      extractComments: false, 
      terserOptions: {
    
     
        compress: {
    
     
          pure_funcs: ['console.log'] 
        }
      }
    }) ]
 }

webpack5Tiene su propia función de compresión js internamente y tiene un terser-webpack-plugincomplemento incorporado, por lo que no necesitamos descargarlo ni instalarlo. Y la función de compresión js se activará automáticamente cuando se establezca mode="production".

Si desea utilizarlo en un entorno de desarrollo, utilice lo siguiente:

  // webpack.config.js中
  module.exports = {
    
    
     optimization: {
    
    
       usedExports: true, //只导出被使用的模块
       minimize : true // 启动压缩
     }
  }
 

2.3 、uglifyjs-webpack-plugin

uglifyjs-webpack-plugin es un complemento de Webpack para comprimir código JavaScript. Está basado en UglifyJS y se utiliza para comprimir y ofuscar código JavaScript.

npm install --save-dev uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    
    
  // ...
  optimization: {
    
    
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
    
    
        // 开启并发
        parallel: true,
        // 多进程压缩
        uglifyOptions: {
    
    
          compress: {
    
    },
          output: {
    
    
            comments: false,
          },
        },
      }),
    ],
  }
}

注：2和3插件相关的代码没有经过实际使用测试效果！！！

3. Uso adecuado del mapa fuente

La función de ProductionSourceMap es localizar problemas. Se generará un archivo .map durante el empaquetado. En el entorno de producción, puede ver la línea específica de la información de salida en el navegador, pero el tamaño del paquete correspondiente también aumentará, lo que También afectará la velocidad de compilación. , configurarlo en falso no generará archivos .map.
Configurar ProductionSourceMap en falso no solo puede reducir el tamaño del paquete, sino también cifrar el código fuente.

module.exports = {
    
    
  productionSourceMap: false
}

4. División de código

Code Splitting es una tecnología para optimizar el rendimiento de las aplicaciones web. Divide el código JavaScript de la aplicación en varias partes más pequeñas y las carga según demanda, lo que reduce el tiempo de carga de la página de inicio y acelera los tiempos de respuesta.

Antes de subcontratar el código, el código de todo el proyecto se empaqueta en un main.js, y luego, cuando se accede a una determinada página, inevitablemente provocará una pérdida de recursos y prolongará el tiempo de carga de la página.
Después de subempaquetar el código, cada módulo se empaqueta por separado. Después de dividir main.js, se vuelve muy pequeño. Cuando se carga la página, también se cargará según demanda.

efecto:

• Acelere la carga de la página
  Cuando el código JavaScript de su aplicación se divide en partes más pequeñas y se carga según demanda, puede reducir los tiempos de carga de la página y hacer que su sitio web tenga mayor capacidad de respuesta.

• Reducir el desperdicio de recursos
  Las aplicaciones web de gran tamaño suelen contener una gran cantidad de código JavaScript, que no se utiliza en todas las páginas. A través de la tecnología Code Splitting, se puede retrasar la carga de código innecesario, reduciendo así el desperdicio de recursos.

• Mejore la experiencia del usuario
  Al utilizar la tecnología de división de código, los usuarios solo necesitan cargar el código que realmente necesitan, en lugar de todo el código de toda la aplicación. Esto puede mejorar la velocidad de respuesta de la página y la experiencia del usuario, al tiempo que reduce el tiempo de carga de la aplicación y la utilización de recursos.

Aquí, divido elementUI, echarts, xlsxy los componentes utilizados en el proyecto en archivos separados, como chunk-echarts.js, chunk-elementUI.js, etc. Los demás se asignan a diferentes archivos fragment js de acuerdo con las reglas configuradas.

ver.config.js

module.exports = {
    
    
  // ...
  chainWebpack(config) {
    
    
  
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
    
    
          config
            .optimization.splitChunks({
    
    
              chunks: 'all',
              cacheGroups: {
    
    
                libs: {
    
    
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
    
    
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 25, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                echarts: {
    
    
                  name: 'chunk-echarts', // split echarts into a single package
                  priority: 30, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?echarts(.*)/ // in order to adapt to cnpm
                },
                xlsx: {
    
    
                  name: 'chunk-xlsx', // split xlsx into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/](xlsx|file-saver)[\\/]/ // in order to adapt to cnpm
                },
                commons: {
    
    
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
        }
      )

  }
}

5. Tecnología de sacudir árboles

paquete web sitio web chino Tree Shaking

Optimización de la experiencia front-end Tree-Shaking
Comprensión de 1 minuto de Tree-Shaking
Un breve análisis de Tree Shaking

Utilice la tecnología Tree Shaking para eliminar el código inútil, reducir el tamaño del archivo empaquetado y mejorar la velocidad de carga de la página.
Tree Shaking es una técnica utilizada para limpiar código no utilizado (código muerto) en JavaScript. Se basa en una estructura estática en la sintaxis del módulo ES6 y reduce el tamaño del paquete al identificar y eliminar partes no utilizadas del proyecto, mejorando así el rendimiento de la aplicación.

Habilitar Tree Shaking en Webpack requiere la siguiente configuración:

Utilice la sintaxis del módulo ES6:
Tree Shaking se basa en la estructura estática de la sintaxis del módulo ES6, por lo que debe asegurarse de utilizar la sintaxis del módulo ES6 en su proyecto y evitar el uso de sintaxis de módulo no estática como CommonJS/AMD.

Establecer modo en el archivo de configuración de Webpack:

odule.exports = {
    
    
  // ...
  mode: 'production',
  optimization: {
    
    
    usedExports: true, // 开启 Tree shaking
  },
};

Establezca la propiedad sideEffects en el archivo package.json:

{
    
    
  "name": "example",
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.jpg",
  ]
}

Agregue el atributo sideEffects en el archivo package.json para indicarle a Webpack qué módulos no deben ser Tree Shaking, como archivos CSS/SCSS y otros archivos con efectos secundarios.

Asegúrese de utilizar el complemento UglifyJSPlugin:
UglifyJSPlugin es un complemento integrado en Webpack, que se utiliza para comprimir y ofuscar código JavaScript, y también se puede utilizar para eliminar código no utilizado. En Webpack 4, dado que TerserWebpackPlugin se usa automáticamente para la compresión y optimización del código JavaScript cuando el modo es producción, no es necesario agregar UglifyJSPlugin por separado.

Después de habilitar Tree Shaking, Webpack analizará el código del proyecto y eliminará todos los módulos y bloques de código a los que no se hace referencia. Hacerlo no solo reduce el tamaño del paquete, sino que también mejora el rendimiento de la aplicación porque el código no válido que no se utiliza ya no necesita analizarse ni ejecutarse.

Después de establecer la configuración anterior, Webapkk realizará automáticamente la sacudida del árbol y eliminará el código no utilizado.

A continuación se ofrece un ejemplo sencillo:

// index.js
import {
    
     add } from './math.js';
console.log(add(1, 2));

// math.js
export function add(x, y) {
    
    
  return x + y;
}

export function sub(x, y) {
    
    
  return x - y;
}

En el código anterior, la subfunción no se utiliza, por lo que el árbol se eliminará después de agitarlo. El código de salida final solo contiene el código de la función agregar y el código de la subfunción se elimina con éxito.

Generalmente, Tree Shaking debe usarse junto con otras tecnologías de optimización, como división de código, carga diferida, precarga, etc., para mejorar aún más el rendimiento de la aplicación y la experiencia del usuario.

6. Introducción del módulo grande cdn

Proveedor de CDN
https://unpkg.com/
https://www.jsdelivr.com/
https://www.bootcdn.cn/
http://www.staticfile.org/

Utilice unpkg, como buscar xlsx

Al ingresar en el navegador unpkg.com/xlsxsaltará a la última versión del código fuente.

Retroceda unos espacios y escriba en el navegador. unpkg.com/xlsx/dist/Saltará a la última versión de la lista dist.

artículo

Al usar elementos externos correctamente, el rendimiento de la compilación del proyecto Vue mejora en un 67 %.
La CDN del proyecto Vue presenta ElementUI

Desventajas: el uso de CDN en línea puede resultar inestable debido a problemas de red, a menos que la empresa tenga su propia biblioteca CDN.
Sin embargo, esta es de hecho una solución de optimización y el efecto no es malo. Su configuración también es muy sencilla, configurada de la siguiente manera en externos:

module.exports = {
    
    
    // 设置通过cdn引入的库，不打包到vendor中（需要去掉导入的相关代码）,需要在index.html中引入cdn资源
    externals: {
    
    
      vue: 'Vue', // 使用cdn引用element-ui时，必须设置vue和element-ui为外部依赖。
      'element-ui': 'ELEMENT', // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
      // 'vue-router': 'VueRouter',
      // axios: 'axios',
      echarts: 'echarts'
      // XLSX: 'XLSX'
    }
}

¿Cómo saber cuál es el paquete de terceros correspondiente key? valueEs el nombre del paquete instalado en el paquete. Cuando el paquete está realmente registrado o el valor de la variable global expuesta, por ejemplo , cuando keyse abre y formatea el código fuente. , puedes ver el valor registrado de la siguiente manera. Sí , y depende de ello , otros paquetes tienen la misma idea.package.jsonvalueelement-uivalueELEMENTelememt-uiELEMENTvue

Introducir CDN en public/index.html

<!-- vue必须在element-ui前面 -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
<!-- unpkg element-ui 源 -->
<link href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<!-- bootcdn element-ui 源 -->
<!-- <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script> -->
    
<script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>
<!-- <script src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script> -->

Si usa el siguiente código en main.js, puede eliminarlo

import ElementUI from 'element-ui'
Vue.use(ElementUI)

Con respecto a echarts, use el siguiente código

import * as echarts from 'echarts'

7. Comprima recursos css, js y de imágenes, y elimine el código inútil

8. compresión gzip

Gzip es un algoritmo de compresión de archivos de uso común que puede comprimir archivos de texto en tamaños más pequeños, mejorando la velocidad de carga del sitio web y la experiencia del usuario. En el desarrollo web, las herramientas de compresión más utilizadas incluyen Gzip y Brotli.

Para habilitar la compresión Gzip, puede utilizar el complemento integrado del paquete web compression-webpack-plugin. El complemento comprimirá automáticamente con Gzip los archivos js y css empaquetados y generará los archivos .gz correspondientes.

Estos son los pasos sobre cómo habilitar la compresión Gzip en su proyecto:

1. Instale el complemento de compresión-webpack-plugin.

npm install compression-webpack-plugin --save-dev

Agregue la configuración en vue.config.js y habilítela compression-webpack-plugin.

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    
    
  configureWebpack: {
    
    
    plugins: [
      // 启用 Gzip 压缩
      new CompressionWebpackPlugin({
    
    
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false,
      }),
    ],
  },
}

En la configuración anterior, los parámetros de CompressionWebpackPlugin tienen los siguientes significados:

nombre de archivo: nombre del archivo comprimido, [ruta] representa la ruta del archivo, [base] representa el nombre del archivo.
algoritmo: algoritmo de compresión, aquí se selecciona Gzip.
prueba: coincide con los tipos de archivos que deben comprimirse.
umbral: el tamaño del archivo se comprimirá solo si excede este valor, la unidad es bytes.
minRatio: la relación entre el tamaño del archivo comprimido y el tamaño del archivo original. Se generará un archivo comprimido solo si es menor que este valor.
deleteOriginalAssets: si se eliminan los archivos originales. Si es verdadero, se eliminará el archivo original y solo se conservará el archivo comprimido.
Ejecute npm run build para compilar el código del entorno de producción. Puede ver que se genera un archivo comprimido .gz en el directorio dist.

Habilite la compresión Gzip en el servidor. Si está utilizando Nginx como servidor web, puede configurarlo en el archivo nginx.conf:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_vary on;
gzip_proxied any;

Esto permite la compresión Gzip en el lado del servidor, mejorando la velocidad de carga del sitio web y la experiencia del usuario.

3. Optimización del rendimiento y la experiencia del usuario

3.1 Carga diferida de rutas

La carga diferida de rutas significa cargar los módulos de enrutamiento correspondientes solo cuando sea necesario, en lugar de cargar todos los módulos de enrutamiento cuando se inicializa el proyecto. Esto puede reducir el tiempo de carga inicial y el consumo de recursos, y mejorar la velocidad de carga de la página y la experiencia del usuario. En un proyecto de Vue, puede utilizar la importación dinámica para implementar la carga diferida de rutas.

Estos son los pasos sobre cómo utilizar la carga diferida de rutas:

Instale el complemento @babel/plugin-syntax-dynamic-import

npm install @babel/plugin-syntax-dynamic-import --save-dev

Agregar complemento en el archivo .babelrc

{
    
    
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Al definir rutas en archivos de configuración de enrutamiento (como router.js), use la función de importación para cargar componentes de enrutamiento de manera diferida.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Home = () => import('./views/Home.vue')

export default new Router({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
    
    
      path: '/',
      name: 'home',
      component: Home
    },
  ]
})

En el código anterior, el componente se carga dinámicamente utilizando la función de importación y el componente se cargará solo cuando se acceda a la ruta correspondiente. Esto implementa la carga diferida de rutas.

3.2 Complemento vue-lazyload, carga diferida de imágenes

vue-lazyloadEs un complemento de Vue.js que se utiliza para implementar la carga diferida de imágenes. Puede monitorear automáticamente los eventos de desplazamiento de la página y cargar la imagen cuando aparece en el área visible del usuario, reduciendo así la presión de carga de la página, optimizando la experiencia del usuario y acelerando la representación de la página.

Los siguientes son vue-lazyloadlos pasos básicos para implementar la carga diferida de imágenes usando:

1) Instalar vue-lazyloadel complemento

npm install vue-lazyload --save

2) Escriba componentes de Vue e introduzca imágenes de carga diferida en la plantilla.

<template>
  <div class="container">
    <img v-lazy="imgSrc" alt="图片描述">
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      imgSrc: 'path/to/image.jpg'
    }
  }
}
</script>

vue-lazyload3) Registre el complemento en Vue

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad)

4) Configurar vue-lazyloadlos parámetros globales de

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
    
    
  loading: 'loading.gif', // 加载中的占位图
  error: 'error.gif' // 加载失败的占位图
})

A través de los pasos anteriores, puede implementar una carga diferida simple de imágenes en aplicaciones Vue, mejorando el rendimiento de la página y la experiencia del usuario.

Cabe señalar que en los navegadores móviles, para mejorar la fluidez del desplazamiento y la experiencia del usuario de la página, se recomienda habilitar vue-lazyloadla listenEventsopción y utilizar Toucheventos en lugar scrollde eventos para monitorear el desplazamiento de la página. Al mismo tiempo, considerando que los usuarios pueden deslizar la interfaz rápidamente durante el desplazamiento, se recomienda activar adapterla opción, que ajusta automáticamente el tiempo de carga y el orden de las imágenes cargadas de forma diferida cuando la página se desplaza, evitando así algunas imágenes. de no cargar debido a que se desplaza demasiado rápido. .

3.3 Usar caché

Utilice la tecnología de almacenamiento en caché y reutilización de recursos para reducir las solicitudes y representaciones repetidas innecesarias, como el uso de componentes de mantenimiento de actividad para almacenar en caché el estado de los componentes.

La tecnología de almacenamiento en caché es una forma eficaz de optimizar el rendimiento de las aplicaciones web y la experiencia del usuario. El proyecto Vue.js también puede utilizar la tecnología de almacenamiento en caché para mejorar aún más la velocidad de respuesta de las aplicaciones, reducir la carga del servidor y mejorar la experiencia del usuario. A continuación se muestran varias formas comunes de utilizar la tecnología de almacenamiento en caché para mejorar la experiencia del usuario en proyectos de Vue.js:

1) Caché del navegador El
caché del navegador es una tecnología de almacenamiento en caché común y fácil de implementar. Al almacenar en caché archivos de recursos (como imágenes, CSS, JS, etc.) en el navegador del cliente, se puede reducir la cantidad de solicitudes del servidor y la velocidad. aumentar la velocidad de carga de la página y reducir la carga del servidor. En Vue.js, puede utilizar keep-alivelos componentes proporcionados por Vue Router para implementar el almacenamiento en caché de componentes. Cuando un componente se almacena en caché, se cargará desde el caché del navegador cada vez que se acceda a él, lo que reducirá la cantidad de solicitudes del servidor y mejorará la experiencia del usuario. . .

2) Almacenamiento en caché del lado del servidor
En proyectos Vue.js, generalmente usamos AJAX o Axios para enviar solicitudes HTTP para obtener datos. Si tenemos que volver a solicitar datos del servidor para cada solicitud, consumirá mucho tiempo y recursos de ancho de banda y afectan la experiencia de los usuarios. Por lo tanto, puede utilizar la tecnología de almacenamiento en caché del lado del servidor para almacenar datos en caché, como usar Redis para almacenar en caché los datos de uso común o usar CDN para almacenar archivos de recursos estáticos, lo que reduce la carga de solicitudes en el servidor y mejora la velocidad de acceso a los datos y el tiempo de respuesta.

3) Carga diferida:
si una página contiene una gran cantidad de imágenes u otros archivos de recursos, afectará en gran medida la velocidad de carga y la experiencia del usuario de la página. Para evitar esta situación, puede utilizar la tecnología de carga diferida, es decir, los archivos de recursos de un área determinada se cargan solo cuando el usuario necesita navegar por el área. En Vue.js, puede utilizar vue-lazyloadcomplementos para implementar la carga diferida de imágenes.

4) Almacenamiento en caché de datos
En el proyecto Vue.js, puede usar Vuex para administrar el estado de la aplicación. En la aplicación, a menudo necesita obtener los mismos datos, por lo que puede usar la tecnología de almacenamiento en caché de Vuex para almacenar en caché los datos solicitados y hacerlo disponible en la siguiente solicitud. Los datos se obtienen directamente del caché, lo que reduce la cantidad de solicitudes del servidor y mejora la experiencia del usuario.

3.4, mirar y calcular

watchy computedson dos métodos de procesamiento de datos reactivos muy utilizados en Vue, que pueden monitorear los cambios de datos y realizar las operaciones correspondientes. En términos de mejorar el rendimiento y la experiencia del usuario de los proyectos Vue, watchtambién computedtienen diferentes escenarios de aplicación y métodos de optimización.

1) Optimizar el rendimiento del reloj

• Intente evitar las operaciones asincrónicas durante la observación, porque las operaciones asincrónicas generalmente bloquean el hilo JS y afectan el rendimiento de la página. Si se deben realizar operaciones asincrónicas, puede utilizar vm.$nextTickel método o Promise.thenpara posponer las operaciones asincrónicas hasta la siguiente actualización de DOM.
• Al monitorear tipos de datos complejos como matrices u objetos, intente usar deepla opción para escuchar cambios en sus subpropiedades en lugar de usar immediatela opción para ejecutar inmediatamente la función de devolución de llamada. Debido a que immediatela función de devolución de llamada se ejecutará inmediatamente, los datos monitoreados se calcularán y representarán varias veces, lo que afectará el rendimiento de la página.
• Evite realizar demasiadas operaciones de cálculo y representación en el reloj e intente manejar computedestas operaciones en atributos.

2. Optimizar el rendimiento calculado

• Evite computedhacer referencia a otros en computed, ya que esto provocará cálculos y renderizaciones redundantes y reducirá el rendimiento de la página.
• Para grandes cantidades de datos o cálculos grandes computed, puede usar lazyla opción para configurarlo en cálculo diferido, que solo se volverá a calcular cuando se necesiten cálculos.
• Para algunos datos receptivos que cambian con frecuencia, puede considerar usarlos watchpara monitorear sus cambios en lugar de usarlos computedpara calcular.

3.5 Antivibración y estrangulamiento

La aceleración de la función (aceleración) y el rebote de la función (antirrebote) sirven para limitar la frecuencia de ejecución de la función para optimizar la velocidad de respuesta causada por que la frecuencia de activación de la función sea demasiado alta para mantenerse al día con la frecuencia de activación, el retraso, la animación suspendida o la congelación
. Solución de optimización para eventos desencadenados con frecuencia.

Vue: antivibración y aceleración con Lodash

3.6 Uso de v-if y v-show

v-ify v-showson dos instrucciones de representación condicional de uso común en Vue. Ambos pueden controlar la visualización y ocultación de elementos según el valor de una expresión, pero existen algunas diferencias en el uso específico.

1) La función de la
v-ifdirectiva v-if es decidir si representar el elemento DOM en función del valor verdadero o falso de la expresión vinculada. Cuando la expresión vinculada es verdadera, el elemento se representará en la página; cuando la expresión vinculada es falsa, el elemento no se representará en la página, lo que equivale a eliminar el elemento del árbol DOM y sus subelementos.
Ventajas: cuando no se cumplen las condiciones, se puede reducir la representación y carga de elementos DOM innecesarios, mejorando así la velocidad de carga y el rendimiento de la página.
Desventajas: cada vez que se cambia la condición, el componente o elemento correspondiente se recreará y destruirá, por lo que puede ser más lento que cuando se ejecuta el programa v-show.

2) La función de la
v-showdirectiva v-show es controlar la visualización y ocultación de elementos en función del valor verdadero o falso de la expresión vinculada. A diferencia de v-if, v-showel elemento no se elimina del árbol DOM, pero la visualización y ocultación del elemento se controla modificando su estilo CSS.
Ventajas: cuando no se cumple la condición, el elemento y sus subelementos no se eliminarán del árbol DOM, por lo que al cambiar las condiciones, se pueden conservar el estado y los atributos del elemento, lo que mejora la fluidez y la experiencia del cambio de página. .
Desventajas: cuando no se cumple la condición, el elemento aún se cargará en la página, por lo que se puede aumentar el tiempo de renderizado y carga de la página. Por ello, se recomienda utilizarlo para elementos o componentes que necesiten cambiarse con frecuencia v-show.