前端性能优化总结（SPA篇）

性能优化

所有开发者都无法避免的一个问题，即关于项目的性能优化。性能优化是一个经久不衰的问题，它几乎贯穿于整个项目的开发过程。做好性能优化的项目不仅能在用户体验上更胜一筹，还能让服务资源的分配更加的合理。

关于SPA（单页面）应用程序的优化

前端开发者基本上都知道单页面的程序有一个通病，首屏加载太慢了，因为第一次访问的时候需要加载的东西太多，资源量太大以至于体验起来可能并不那么友好，以下就这个点便可以针对性地展开优化。

1、路由懒加载

SPA 项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有的资源，造成首页加载很慢，降低用户体验。

官方其实也就这个问题给出了答复，我们只需要按照他们的提示去改动代码，那么就可以在一定程度上去提高项目的运行速度。

// 通过webpackChunkName设置分割后代码块的名字
const Home = () => import(/* webpackChunkName: "home" */ "@/views/home/index.vue");
const MetricGroup = () => import(/* webpackChunkName: "metricGroup" */ "@/views/metricGroup/index.vue");
…………
const routes = [
    {
   
       path: "/",
       name: "home",
       component: Home
    },
    {
   
       path: "/metricGroup",
       name: "metricGroup",
       component: MetricGroup
    },
    …………
]

2、组件懒加载

组件懒加载跟路由懒加载的方式一样，将资源分开，等到需要的时候我们再把它引入到我们的页面中，从而节省资源，优化页面的加载速度。

例如弹窗组件的懒加载。

<script>
const dialogInfo = ()<