前端只会写业务,不会nginx部署和提高性能?Trae老师来教教

前言

作为一个天天只写业务的前端攻城狮,还不知道怎么部署前端项目,部署之后怎么性能优化也不知道,只知道压缩打包的体积,这样就是全部优化手段了?

nginx是不是听着很耳熟,很高级的一个东西,是不是还不知道怎么安装使用?

今天就让Trae来教教怎么安装部署,以及优化前端性能吧~

首先先让Trae帮我输出一份配置来看看,这样的前端优化是不是合理的

性能优化配置,适用于静态网站前端

gzip压缩,常见的体积压缩,会有优雅降级,不支持gzip的浏览器会请求对应的html、css、js文件,不至于访问不了浏览器

js 复制代码
gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;

缓存配置,对应的静态资源配置时效性,保证浏览器在时间内会走缓存,不至于每次都请求服务器,导致加载速度缓慢

js 复制代码
map $sent_http_content_type $expires {
        default 1M;
        text/html 1h;
        text/css 1M;
        application/javascript 1M;
        ~image/ 1M;
        ~font/ 1M;
    }

安全请求头也不要忘记配置

js 复制代码
    # 安全头配置
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

server是配置服务,配置服务器的根目录,可以在根目录新增文件夹,然后在域名后面添加上新增的文件夹就可以访问到对应的网页

js 复制代码
 server {
        listen 80;
        listen [::]:80;
        server_name localhost;
        
        # 根目录配置
        root /usr/share/nginx/html;
        index index.html index.htm;
    }

静态资源优化

js 复制代码
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1M;
            add_header Cache-Control "public, immutable";
            add_header Vary Accept-Encoding;
        }

api代理,前端的跨域也可以通过这种方式来解决,也是主流的解决方式

js 复制代码
location /api/ {
            proxy_pass http://backend;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_cache_bypass $http_upgrade;
        }

ssl证书配置,如果没有这个,你的服务器就相当于是在裸奔,知道你的ip就可以轻松攻击你的服务器

js 复制代码
server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name localhost;
        
        ssl_certificate /etc/nginx/ssl/cert.pem;
        ssl_certificate_key /etc/nginx/ssl/key.pem;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
        ssl_prefer_server_ciphers off;
        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 10m;
        
        include /etc/nginx/conf.d/default.conf;
    }

现在的腾讯云和阿里云的免费域名都是3个月有时效性,到期就得手动更换,如果你不想麻烦,可以去github搜索开源项目,可以自动续签域名,让你一劳永逸,不在为域名过期而烦恼,以及错失成交的机会

总结

前端的优化手段,很大一部分都可以靠nginx进行优化,有时候前端工程化的webpack或vite无法再优化时,可以考虑使用nginx的配置来优化,优化方式千千万,适合自己的才是真理,切记不要盲目优化,记得先分析是哪里出现性能瓶颈再下手优化哦

trae的优化也是很专业

Trae给出的预期也是可以达到的

相关推荐
Lethehong1 天前
上下文工程实践:利用GLM-4.6和TRAE SOLO打造新粗野主义风格音乐创作网站
react·trae·glm我的编程搭子·glm-4.6
豆包MarsCode2 天前
TRAE × Spec Kit 实战:五步构建流式 AI 对话 Web 应用
trae
todoitbo2 天前
我用 TRAE 做了一个不一样的 MySQL MCP
数据库·mysql·adb·ai工具·mcp·trae·mysql-mcp
用户4099322502122 天前
想让PostgreSQL查询快到飞起?分区表、物化视图、并行查询这三招灵不灵?
后端·ai编程·trae
用户4099322502123 天前
PostgreSQL连接的那些弯弯绕:笛卡尔积、外连接和LATERAL你都理明白没?
后端·ai编程·trae
豆包MarsCode3 天前
TRAE 设计团队如何玩转 Vibe Coding(下)|设计工具生成与提效篇
trae
世界哪有真情4 天前
Trae 蓝屏问题
前端·后端·trae
用户4099322502124 天前
子查询总拖慢查询?把它变成连接就能解决?
后端·ai编程·trae
豆包MarsCode4 天前
TRAE 设计团队如何玩转 Vibe Coding(上)|高美感页面生成篇
trae
用户4099322502125 天前
PostgreSQL全表扫描慢到崩溃?建索引+改查询+更统计信息三招能破?
后端·ai编程·trae