Vue 为单页面提速----- 性能优化

smileYuWei

于 2020-09-18 10:15:34 发布

阅读量813

点赞数

分类专栏： vue js + ts 文章标签： vue js javascript

本文链接：https://blog.youkuaiyun.com/qq_37976966/article/details/108659922

版权

本文探讨了Vue应用的性能优化策略，包括通过路由懒加载提升页面加载速度，避免过多HTTP请求，确保组件销毁后资源释放，使用`object.freeze()`优化详情页，以及图片资源管理。此外，还介绍了如何利用Webpack处理图片，设置externals以减少打包时间，并详细解释了函数式组件的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发方面：

一，路由懒加载
当打包构建应用时，所有的js 代码会打包到一个js文件里，会影响到页面加载，可能会导致首页白屏的情况，用户体验感超级差

解决方法如下：

将不同的路由对应的组件拆分成不同的代码块，只有当路由被访问时才会加载对应的组件（即让路由延迟加载）

const HelloWorld= () => import(/* webpackChunkName: "HelloWorld" */'@/views/helloWorld.vue') // 引入组件
//在路由里使用HellowWorld
const router = new VueRouter({
   
	routes: [
		{
    path: '/foo' component: HelloWorld }
	]
})

二，组件懒加载
当一个页面嵌入了多个组件与此同时将会带来过多的http请求，可能会导致页面加载速度以及渲染速度参差不齐的问题

export default {
   
	componrnts: {
   
		helloWorld:

最低0.47元/天解锁文章