Optimización del embalaje en línea de Vue

Al desarrollar un proyecto Vue, normalmente necesitamos empaquetar y optimizar el proyecto para proporcionar una aplicación de mayor rendimiento en el entorno de producción. Este blog presentará algunas técnicas de optimización de paquetes en línea de Vue para ayudarlo a optimizar la velocidad de carga y el rendimiento de su aplicación.

1. Está prohibido generar archivos sourceMap.

Durante el proceso de empaquetado del proyecto Vue, el archivo sourceMap se generará de forma predeterminada. La función principal de sourceMap es hacer que el archivo empaquetado parezca código sin comprimir, lo cual es conveniente para depurar y localizar errores. Sin embargo, normalmente no necesitamos estos archivos en un entorno de producción porque aumentan el tamaño de la aplicación. Puede vue.config.jsconfigurar para deshabilitar la generación de archivos sourceMap en:

// vue.config.js
module.exports = {
  productionSourceMap: false, // 是否在构建生产包时生成sourceMap文件，false将提高构建速度
}

2. Desactivar la captación previa (Prefetch)

Vue CLI 3 habilita la función de búsqueda previa de forma predeterminada, es decir, buscar previamente el contenido que el usuario puede visitar en el futuro cuando se carga la primera pantalla. Esto puede provocar un consumo de tráfico innecesario. Si su proyecto tiene restricciones de tráfico, considere desactivar la función de captación previa. En vue.config.jsconjunto de la siguiente manera:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除prefetch插件
    config.plugins.delete('prefetch')

    // 或者修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

3. Enrutamiento de carga diferida

Para algunas páginas, es posible que queramos empaquetar todos los componentes que contiene en el mismo fragmento asincrónico (fragmento) para reducir la cantidad de solicitudes cuando se carga la primera pantalla. Puede utilizar una sintaxis de anotación especial para proporcionar un nombre de fragmento para implementar la carga diferida de rutas:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

4. Cargue los componentes de la interfaz de usuario de Element a pedido

Una vez empaquetado el proyecto Vue, si se utiliza la biblioteca completa de componentes Element UI, el volumen del proyecto aumentará. Para reducir el volumen empaquetado, podemos introducir componentes de Element UI según sea necesario. En la versión Vue CLI 3.x, el archivo de configuración es babel.config.js, que se puede configurar de acuerdo con los siguientes pasos:

Instale el complemento de Babel:

npm install babel-plugin-component -D

Configurado de babel.config.jsla siguiente manera:

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

5. Utilice CDN para cargar recursos externos

Para algunos recursos externos de uso común, como Vue, Vuex, Vue Router, Axios, etc., podemos importarlos a través de CDN para reducir el tamaño del archivo empaquetado. El siguiente es vue.config.jsel código principal para configurar la carga de CDN en:

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
    css: [],
    js: [
        'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
        'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
    ]
}
module.exports = {
    chainWebpack: config => {
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入CDN
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: config => {
        if (isProduction) {
            // 用CDN方式引入
            config.externals = {
                'vue': 'Vue',
                'vuex': 'Vuex',
                'vue-router': 'VueRouter',
                'axios': 'axios'
            }
        }
    },
}

En index.html, podemos agregar dinámicamente los archivos CSS y JS correspondientes de acuerdo con la configuración de CDN que carga recursos externos.

6. Utilice Gzip para comprimir

Una vez completado el empaquetado, podemos usar Gzip para comprimir los archivos empaquetados y reducir el tamaño del archivo. Primero, instale compression-webpack-pluginel complemento:

npm install compression-webpack-plugin -D

Luego vue.config.jsimporte el complemento y configure las opciones de compresión:

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置...
        config.mode = 'production'
        return {
            plugins: [new CompressionPlugin({
                test: /\.js$|\.html$|\.css/, //匹配文件名
                threshold: 10240, //对超过10k的数据进行压缩
                deleteOriginalAssets: false //是否删除原文件
            })]
        }
    }
}

7. Compresión de imágenes

Para los recursos de imagen del proyecto, puede utilizar image-webpack-loaderla compresión de imágenes para reducir el tamaño de la imagen. Primero, instale image-webpack-loader:

npm install image-webpack-loader --save-dev

Luego chainWebpackagregue el siguiente código en:

config.plugins.delete('prefetch')
config.module.rule('images')
    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({ bypassOnDebug: true })

Ocho, compresión de código

El último paso es minimizar el código para eliminar códigos y comentarios innecesarios. Podemos usar uglifyjs-webpack-plugincomplementos para lograr esto. Primero, instale el complemento:

npm install -D uglifyjs-webpack-plugin

Luego configureWebpackagregue el siguiente código:

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

new UglifyJsPlugin({
    uglifyOptions: {
        // 生产环境自动删除console
        compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
        }
    },
    sourceMap: false,
    parallel: true
})

Las anteriores son algunas técnicas para la optimización del empaquetado en línea de Vue: al deshabilitar sourceMap, desactivar la captación previa, la carga diferida de rutas, cargar componentes de Element UI a pedido, cargar recursos externos usando CDN, usar compresión Gzip, compresión de imágenes y compresión de código, etc. Puede ejecutar aplicaciones Vue de manera más eficiente y rápida en entornos de producción. De acuerdo con sus necesidades reales, elija el método de optimización adecuado para su proyecto para brindar una mejor experiencia de usuario y rendimiento. Fuente: Station B UP - El pequeño socio del programador