vue提高加載速度的方法

時間 2021-05-24

標籤 javascript php css html 前端 vue java webpack nginx web 欄目 JavaScript 简体版

原文原文鏈接

1、利用路由懶加載

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

2.修改babel.config.js文件php

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

3.vue.config.js增長以下配置，取消prefetch和preloadcss

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

2、壓縮資源文件（vue 前端打包 chunk-vendors文件過大的問題）

1.安裝插件（指定版本爲@5.0.1，太高的版本會報錯：Cannot read property 'tapPromise' of undefined）html

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.後端配置nginxvue

# 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;
  }
}