提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 常规且有效 的首屏优化建议
目标： 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理
1、路由懒加载
SPA 项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有的资源，造成首页加载很慢，降低用户体验
列一个实际项目的打包详情：
-
app.js 初始体积：
1175 KB
-
app.css 初始体积：
274 KB
将路由全部改成懒加载
// 通过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
},
…………
]
重新打包后，首页资源拆分为 app.js 和 home.js，以及对应的 css 文件
-
app.js：
244 KB、 home.js:35KB
-
app.css：
67 KB、home.css:15KB
通过路由懒加载，该项目的首页资源压缩约 52%
路由懒加载的原理
懒加载前提的实现：ES6的动态地加载模块——import()
调用 import() 之处，被作为分离的模块起点，意思是，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中
——摘自《webpack——模块方法》的import()小节
要实现懒加载，就得先将进行懒加载的子模块分离出来，打包成一个单独的文件
webpackChunkName 作用是 webpack 在打包的时候，对异步引入的库代码（lodash）进行代码分割时，设置代码块的名字。webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中
2、组件懒加载
除了路由的懒加载外，组件的懒加载在很多场景下也有重要的作用
举个