Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] SPA首屏加载速度慢的怎么解决? #286

Open
haizhilin2013 opened this issue Jun 18, 2019 · 3 comments
Open

[vue] SPA首屏加载速度慢的怎么解决? #286

haizhilin2013 opened this issue Jun 18, 2019 · 3 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] SPA首屏加载速度慢的怎么解决?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 18, 2019
@Zjingbo
Copy link

Zjingbo commented Jul 2, 2019

1.通过Gzip压缩
2.使用路由懒加载
3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小
4.使用SSR渲染

@PointerToNextPole
Copy link

PointerToNextPole commented Sep 7, 2022

补充两点:

@Cai-zhiji
Copy link

代码分割(Code Splitting):

将代码分割成多个小块,按需加载,而不是一次性加载所有代码。
使用工具(如Webpack)进行代码分割,将不同路由或组件的代码打包成独立的文件,根据需要进行按需加载。

懒加载(Lazy Loading):

将非首屏的组件、路由或模块进行懒加载,即当需要用到时再进行加载。
Vue中可以使用异步组件或Vue Router的懒加载功能来实现懒加载。

路由懒加载(Route-based Chunking):

对于具有多个路由的SPA,将不同路由的组件分割成独立的块,根据访问的路由加载对应的组件块。
这样可以避免加载不需要的组件,提高首屏加载速度。

预加载(Preloading):

针对SPA中即将访问到的页面或资源,提前进行加载。
可以使用标签或Webpack的预加载功能来实现预加载。

缓存(Caching):

使用浏览器缓存机制,将静态资源(如CSS、JS文件)进行缓存,减少重复加载的次数。
可以通过设置HTTP响应头来指定静态资源的缓存策略。

代码优化:

优化和压缩代码,减少文件大小。
移除无用的代码和依赖。
使用Vue的生命周期钩子和异步组件等功能来控制组件的渲染时机,避免不必要的渲染。

使用服务端渲染(SSR):

对于需要更快的首屏加载速度和更好的SEO优化,可以考虑使用服务端渲染(SSR)来生成首屏内容。
SSR将在服务器端渲染页面并返回给客户端,减少了客户端渲染的时间。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

4 participants