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

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

这是一个创建于 1908 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

Python

React

网站

打开

30 条回复 • 2019-09-09 16:22:28 +08:00

LZYPPP

2019-09-07 16:20:25 +08:00

之后打开快是因为有缓存吧。单页面首次要加载全部资源

hkitdog

2019-09-07 16:24:53 +08:00 via iPhone

PWA?

hewelzei

2019-09-07 16:25:51 +08:00

CSR 即客户端渲染的缺点就是首屏加载速度慢和 SEO 问题，想提高首屏加载速度可以用 SSR 即服务端渲染，或同构渲染

shintendo

2019-09-07 16:34:18 +08:00

不一定要 SSR，有没有做按需加载

ebingtel

2019-09-07 16:39:37 +08:00

……python 又背锅

duan602728596

2019-09-07 16:40:45 +08:00 via iPhone

你应该做的：1. 压缩 css 和 js 文件，2.使用 gzip 或 br 压缩，3.压缩图片体积，4.文件使用缓存

djs

2019-09-07 16:44:32 +08:00

你让前端自查下自己加载的数据都有哪些，有多大

Yourshell

2019-09-07 16:45:38 +08:00

这个时候应该发“提问的智慧”？

learnshare

2019-09-07 16:56:35 +08:00

F12 查找问题就是了

jinboker

2019-09-07 17:55:44 +08:00

还有你前端代码放到哪里了？
如果是你自己服务器上，看下你服务器带宽多少，要是是 1m 的小水管，指望个啥速度啊

至于后面打开快，就是有缓存了，不用重新下载了

Rorshach

2019-09-07 18:18:08 +08:00

把静态资源全都丢到 CDN 上

wlchn

2019-09-07 18:27:38 +08:00 via iPhone

第一次打开需要 load react bundle 文件，这个文件一般比较大，所以会导致第一次慢，之后再打开网站会用浏览器缓存所以就快了，解决办法是 ssr

notreami

2019-09-07 18:53:20 +08:00

人多，钱多，再想的上前端这堆玩意吧，否则还不如 10 年前的 div+js+后端模版。

DOLLOR

2019-09-07 19:10:31 +08:00

这时候不是应该上 network 的瀑布图么？

Tink

2019-09-07 19:10:32 +08:00 via iPhone

静态资源上 cdn

VDimos

2019-09-07 19:19:00 +08:00 via Android

盲猜 react 打包没优化

secondwtq

2019-09-07 19:30:29 +08:00

黑 Python 新姿势？
好像是两个都黑了 ...

hunk

2019-09-07 20:08:01 +08:00

vue 的调试模式好像每次编译，速度巨慢。
估计也是类似问题

mamahaha

2019-09-07 20:17:38 +08:00

你去看看 js 文件多大吧，有没有用 webpack 按需？

zachlhb

2019-09-07 20:18:16 +08:00 via Android

前后端分离本就是个伪命题

zhixuanziben

2019-09-07 22:19:02 +08:00

打开 chorme 控制台，看看哪个环节耗时过长？然后再找办法优化

hspeed18

2019-09-07 22:25:52 +08:00

看一下 waterfall，你是不是单页应用？

brickyang

2019-09-07 23:33:31 +08:00 via iPhone

先看下有没有把 CSS 和 JS 分开，如果没有，用 MiniCssExtractPlugin。

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

最后，静态文件用 CDN。

est

2019-09-08 00:00:31 +08:00

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

qsnow6

2019-09-08 01:37:24 +08:00 via iPhone

单独测试下接口，不要一上来就是语言背锅

akira

2019-09-08 01:47:48 +08:00

网站发出来，我们帮你看下就知道了

jxman

2019-09-08 09:51:44 +08:00

方案 1：改架构
看样子 lz 是直接客户端渲染的，可以考虑做页面直出，这样页面呈现会快很多。

方案 2：直接优化现有方案（不一定能达到目标）
chrome lighthouse 走一波，然后根据测评建议做优化。
压缩图片最优先，其他的手段看测评结果再选。

palmers

2019-09-08 13:53:55 +08:00

根据你的描述应该是前端依赖的问题，你看看 vendor-xx.js 体积然后使用动态加载根据路由不要一次加载全部依赖，然后去掉一些不必要的依赖，去除重依赖比如 moment 常常只是用来加减一些时间这种就太浪费了

skallz

2019-09-09 10:00:27 +08:00

需要做的工作，第一，路由懒加载，第二，插件按需引入，第三，静态资源请走 cdn，第四，部分文件请进行压缩，第五，可以先显示一个屏幕内容，其他内容使用流加载或按钮等形式触发加载，第六，不要为了复用接口而导致首屏使用的接口需要加载不必要的数据，大概就这些

qlhai

2019-09-09 16:22:28 +08:00

你把 url 贴出来，我们给你看下