Prefacio:

Después de más de medio año, el sistema finalmente está a punto de saltar del mar de sufrimiento, y está listo para ser puesto en uso en línea. Buen chico, el servidor es muy lento, ¿qué debo hacer? En pánico, ¿hay demasiados errores? ! ? Además del enredo, decidí encontrar el problema y simplemente hacerlo. Los siguientes métodos son solo de referencia y pueden no ser universales.

Consulta los resultados finales

1. La diferencia entre el entorno de producción y el entorno de prueba.

Se encuentra que el entorno de producción siempre es muy lento, y el entorno de prueba será mucho más rápido.Sin mencionar f12, se encuentra que el archivo de entrada app.js y el paquete de dependencia chunk-vendors.js del entorno de producción son mucho más grande

Luego busque el comando de empaquetado, buen chico, el entorno de producción en realidad escribió un archivo de configuración de Dell por sí mismo, utilizando la siguiente configuración, y el entorno de prueba viene con vue-cli. Usando un método violento (reemplazando la estructura interna del archivo de comando), la velocidad instantánea no es un grado

2. Rectificación de enrutamiento

Abra la solicitud del navegador, busque la solicitud. Aparece la siguiente imagen, el paciente con trastorno obsesivo-compulsivo, la imagen causa una incomodidad extrema (oh, Dios mío, dónde estoy, quién soy)

Puede ignorarse aquí por el momento: el código escrito por este gran maestro está lleno de números de teléfono y la clasificación es clara, pero no sé qué módulo es. A continuación se proporcionan dos métodos de reparación.

// 方法一 ：webpack别名配置  添加/* webpackChunkName: "Home" */ 后面对应的就是重命名的名称
{
    path: "/index",
    name: "Home",
    component: () => import(/* webpackChunkName: "Home" */ "@/views/Home.vue"),
    meta: { title: "首页", affix: true }
},

// 方法二 ：node配置  require.ensure函数 此法不推荐，看着就眼花缭乱
{
    path: "/index",
    name: "Home",
    component: 
    resolve => require.ensure([],
        () => resolve(require('@/views/Home.vue')), 'Home'),
    meta: { title: "首页", affix: true }
},

Hay tantos módulos js, parece que todos ellos han sido introducidos ¿Será que no hay carga diferida de rutas? ! Pero después de leer el código, de hecho es un método de carga lenta, entonces, ¿cuál es el problema?
Haga clic derecho en el navegador, abra el código fuente y vea el siguiente código. En realidad, se importa globalmente. Hay una precarga (precarga de vue-cli3). Buen chico, vamos a matarte primero.

Agregue la siguiente configuración al archivo vue.config.js

    chainWebpack: config => {
        // 删除预加载
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');
    },

Cierre el servicio, vuelva a compilar (npm start u otro) y verifique nuevamente, de hecho se eliminó, se eliminó y se eliminó, y la velocidad es varios segundos más rápida

3. archivos comprimidos ngix + webpack

Después de este método, cada js/css/imagen se puede comprimir. Formar un archivo de mapeo .gz

3.1 Parte delantera

Aquí primero instale el paquete comprimido webpack

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

Luego ejecute el paquete e intente, puede ocurrir el siguiente error, esto se debe a la versión del paquete, puede instalar el último paquete npm install [email protected]

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined

El archivo empaquetado tendrá un archivo de mapeo .gz, lo que significa que el front-end ha sido exitoso

3.2 Servidor

El ngix en el backend necesita agregar las siguientes configuraciones compatibles

server {
        listen       8093;       #监听端口
        server_name  localhost;  #negix服务名
		gzip on;
		gzip_min_length 1k;
		gzip_comp_level 9;
		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.";
        location /fdk-erp-mig {
                        proxy_pass  http://192.168.1.245:8080/fdk-erp-mig;
                }
        location / {
            root   html/Mig-RefactorFDK;
            index  index.html; #首页 按出现顺序检查加载
                    }
        
         }

Después de ejecutar los dos pasos anteriores, el código se ha reducido significativamente. Si la carga de la página de inicio aún es lenta, debe considerar si se trata de un problema de respuesta del servidor o si el archivo de entrada principal main.js tiene muchas cosas montadas globalmente.

Si main.js sigue siendo muy grande, debe importar las cosas que están montadas globalmente en los componentes de acuerdo con sus necesidades individuales.

pd: importe componentes a pedido, es mejor usar el siguiente método para importar

const SelectJobDialog = resolve =>
  require(["@/components/SelectJobDialog.vue"], resolve); // 此处按需加载组件

4. Finalmente, publique todas las configuraciones de archivos vue.config.js

/*
 * @ModuleName: vue.config.js
 * @Author: liuxin
 * @Date: 2021-03-30 16:31:57
 * @LastEditors: liuxin
 * @LastEditTime: 2021-03-30 16:36:27
 */
const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin"); //引入压缩插件
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; //匹配此 {RegExp} 的资源
module.exports = {
    lintOnSave: false,
    productionSourceMap: false, // 去除源码映射
    publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
    // 开发环境及代理配置
    devServer: {
        open: true,
        port: "9999",
        proxy: {
            "/api": {
                // 代理地址
                target: "此处自行修改代理地址，防止跨域",

                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    "^/api": ""  // 路径重写
                }
            }
        }
    },

    pluginOptions: {
        "style-resources-loader": {
            preProcessor: "scss",
            patterns: [
                // 需要全局导入的scss路径
                path.resolve(__dirname, "./src/assets/styles/vars.scss"),
                path.resolve(__dirname, "./src/assets/styles/global.scss")
            ]
        },
    },
    outputDir: process.env.outputDir, // 打包生成的文件夹名称

    chainWebpack: config => {
        // 删除预加载
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');
    },
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
                // filename: '[path].gz[query]', // 提示[email protected]的话asset改为filename
                //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
                algorithm: 'gzip',
                //所有匹配该正则的资源都会被处理。默认值是全部资源。
                test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
                //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
                threshold: 10240,
                //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
                minRatio: 0.8
            })
        ]
    },
};

Acerca del proceso de optimización lento de carga del sistema (empaquetado vue-cli4)