推荐学习书目
› 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 · Sep 7, 2019 · 6525 views
    This topic created in 2617 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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