V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
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
chiva
V2EX  ›  Python

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

  •  
  •   chiva · 2019-09-07 16:13:57 +08:00 · 5399 次点击
    这是一个创建于 1886 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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