這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 提升首屏的載入速度，是前端性能優化中最重要的環節，這裡筆者梳理出一些 常規且有效 的首屏優化建議 目標： 通過對比優化前後的性能變化，來驗證方案的有效性，瞭解並掌握其原理 1、路由懶載入 SPA 項目，一個路由對應一個頁面，如果不做處理， ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
提升首屏的載入速度，是前端性能優化中最重要的環節，這裡筆者梳理出一些 常規且有效 的首屏優化建議
目標： 通過對比優化前後的性能變化，來驗證方案的有效性，瞭解並掌握其原理
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、組件懶載入
除了路由的懶載入外，組件的懶載入在很多場景下也有重要的作用
舉個
