前端vue项目响应时间优化

 

场景:项目部署在/dist/这个子路径下, 扫码打开页面要8s, 目标是优化到2s内

解决:将yarn build出来的dist整个文件夹上传到对象存储里(之前做视频点播开通了鹅厂的账号,所以这次也用它的)

然后在nginx里配置重定向.

vue.config.js

const cdnDomain = '';
const deployPath = "/dist/";

module.exports = {
    productionSourceMap: false, // 生产环境禁用
    publicPath:
        process.env.NODE_ENV === "production" ? cdnDomain + deployPath : "/",
    outputDir: process.env.outputDir,

Nginx配置

    location ~ ^/dist/js/chunk-[a-z0-9]*\.[a-z0-9]*\.js$ {
      rewrite ^/(.*) https://<对象存储oss域名>/$1 permanent;
    }

    location ~ ^/dist/js/index\.[a-z0-9]*\.js$ {
      rewrite ^/(.*) https://<对象存储oss域名>/$1 permanent;
    }

    location ~ ^/dist/css/index\.[a-z0-9]*\.css$ {
      rewrite ^/(.*) https://<对象存储oss域名>/$1 permanent;
    }

    location /dist {
        root /home/user/frontend/bigan;
        try_files $uri $uri/ /dist/index.html;

        # kill caching
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
    }

搞定收工~

PS: 对象存储需配置跨域, 否则XHR请求可能会被拦截