vue提升加载速度的方法

Posted 2021-09-15 winter

一、利用路由懒加载

1.安装插件
npm install --save-dev @babel/plugin-syntax-dynamic-import

2.修改babel.config.js文件

module.exports = {
    presets: [
        \'@vue/app\'
    ],
    "plugins": [
        [
            \'@babel/plugin-syntax-dynamic-import\'
        ]
    ]
}

3.vue.config.js增加如下配置，取消prefetch和preload

chainWebpack(config) {
     config.plugins.delete(\'preload\')
     config.plugins.delete(\'prefetch\')
}

二、压缩资源文件（vue 前端打包 chunk-vendors文件过大的问题）

1.安装插件（指定版本为@5.0.1，过高的版本会报错：Cannot read property \'tapPromise\' of undefined）

npm i compression-webpack-plugin@5.0.1

2.修改vue.config.js

const webpack = require(\'webpack\')

const CompressionWebpackPlugin = require(\'compression-webpack-plugin\')
const productionGzipExtensions = [\'js\', \'css\']
const isProduction = process.env.VUE_APP_ENV_NAME === \'production\'

module.exports = {
     configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                algorithm: \'gzip\',
                test: /\\.(js|css|less)$/, // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                minRatio: 0.8,
                // deleteOriginalAssets: true // 删除源文件
              })
        ],
    },
}

3.后端配置nginx

# gzip config
    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]\\.";
    
    
    
    
 server {
    listen 80;
    # gzip config
    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]\\.";

    root /usr/share/nginx/html;

    location / {
        # 用于配合 browserHistory 使用
        try_files $uri $uri/ /index.html;

        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 
        # rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;

    }
    location /api {
        proxy_pass https://preview.pro.loacg.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

server {
  # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验 
  listen 443 ssl http2 default_server;

  # 证书的公私钥
  ssl_certificate /path/to/public.crt;
  ssl_certificate_key /path/to/private.key;

  location / {
        # 用于配合 browserHistory 使用
        try_files $uri $uri/ /index.html;

  }
  location /api {
      proxy_pass https://preview.pro.loacg.com;
      proxy_set_header   X-Forwarded-Proto $scheme;
      proxy_set_header   Host              $http_host;
      proxy_set_header   X-Real-IP         $remote_addr;
  }
}