首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python 学习手册
Python Cookbook
Python 基础教程
Python Sites
PyPI - Python Package Index
http://www.simple-is-better.com/
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
V2EX  ›  Python

用 Python 写的网站前端用 react 首次打开网站超级慢

  •  
  •   chiva · 15 天前 · 2732 次点击

    求助个问题,最近做的一些网站部署完以后第一次打开网站超级慢,应该与服务器无关,之后再打开就很快了,这个问题找了很久没找到答案,网站是 python+react。

    30 回复  |  直到 2019-09-09 16:22:28 +08:00
        1
    LZYPPP   15 天前
    之后打开快是因为有缓存吧。单页面首次要加载全部资源
        2
    hkitdog   15 天前 via iPhone
    PWA?
        3
    hewelzei   15 天前
    CSR 即客户端渲染的缺点就是首屏加载速度慢和 SEO 问题,想提高首屏加载速度可以用 SSR 即服务端渲染,或同构渲染
        4
    shintendo   15 天前
    不一定要 SSR,有没有做按需加载
        5
    ebingtel   15 天前   ♥ 2
    ……python 又背锅
        6
    duan602728596   15 天前 via iPhone
    你应该做的:1. 压缩 css 和 js 文件,2.使用 gzip 或 br 压缩,3.压缩图片体积,4.文件使用缓存
        7
    djs   15 天前
    你让前端自查下自己加载的数据都有哪些,有多大
        8
    Yourshell   15 天前
    这个时候应该发“提问的智慧”?
        9
    learnshare   15 天前
    F12 查找问题就是了
        10
    jinboker   15 天前
    还有你前端代码放到哪里了?
    如果是你自己服务器上,看下你服务器带宽多少,要是是 1m 的小水管,指望个啥速度啊

    至于后面打开快,就是有缓存了,不用重新下载了
        11
    Rorshach   15 天前
    把静态资源全都丢到 CDN 上
        12
    wlchn   15 天前 via iPhone
    第一次打开需要 load react bundle 文件 ,这个文件一般比较大,所以会导致第一次慢,之后再打开网站会用浏览器缓存所以就快了,解决办法是 ssr
        13
    notreami   15 天前
    人多,钱多,再想的上前端这堆玩意吧,否则还不如 10 年前的 div+js+后端模版。
        14
    DOLLOR   15 天前
    这时候不是应该上 network 的瀑布图么?
        15
    Tink   15 天前 via iPhone
    静态资源上 cdn
        16
    VDimos   15 天前 via Android
    盲猜 react 打包没优化
        17
    secondwtq   15 天前
    黑 Python 新姿势?
    好像是两个都黑了 ...
        18
    hunk   15 天前
    vue 的调试模式好像每次编译,速度巨慢。
    估计也是类似问题
        19
    mamahaha   15 天前
    你去看看 js 文件多大吧,有没有用 webpack 按需?
        20
    zachlhb   15 天前 via Android
    前后端分离本就是个伪命题
        21
    zhixuanziben   15 天前
    打开 chorme 控制台,看看哪个环节耗时过长?然后再找办法优化
        22
    hspeed18   15 天前
    看一下 waterfall,你是不是单页应用?
        23
    brickyang   15 天前 via iPhone
    先看下有没有把 CSS 和 JS 分开,如果没有,用 MiniCssExtractPlugin。

    然后看下 JS 文件大小。如果太大了,用 webpack-bundke-analyzer 分析一下,很可能是打了大包进去,尽量按需打包以及分包。

    最后,静态文件用 CDN。
        24
    est   15 天前
    chiva 写的网站前端用 react 首次打开网站超级慢
        25
    qsnow6   15 天前 via iPhone
    单独测试下接口,不要一上来就是语言背锅
        26
    akira   15 天前
    网站发出来,我们帮你看下就知道了
        27
    jxman   14 天前
    方案 1: 改架构
    看样子 lz 是直接客户端渲染的,可以考虑做页面直出,这样页面呈现会快很多。

    方案 2:直接优化现有方案(不一定能达到目标)
    chrome lighthouse 走一波,然后根据测评建议做优化。
    压缩图片最优先,其他的手段看测评结果再选。
        28
    palmers   14 天前
    根据你的描述 应该是前端依赖的问题, 你看看 vendor-xx.js 体积 然后使用动态加载 根据路由 不要一次加载全部依赖, 然后去掉一些不必要的依赖,去除重依赖 比如 moment 常常只是用来加减一些时间 这种就太浪费了
        29
    skallz   13 天前
    需要做的工作,第一,路由懒加载,第二,插件按需引入,第三,静态资源请走 cdn,第四,部分文件请进行压缩,第五,可以先显示一个屏幕内容,其他内容使用流加载或按钮等形式触发加载,第六,不要为了复用接口而导致首屏使用的接口需要加载不必要的数据,大概就这些
        30
    qlhai   13 天前
    你把 url 贴出来,我们给你看下
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   736 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 21:18 · PVG 05:18 · LAX 14:18 · JFK 17:18
    ♥ Do have faith in what you're doing.