前言
常規(guī) vue 項(xiàng)目打包后訪問毙死，返回一個(gè)只包含 div 的 html试溯，其他內(nèi)容塊都是通過 js 動(dòng)態(tài)生成的柜去。
存在兩個(gè)比較大的問題：
- 不利于 seo
- 首屏加載慢灰嫉，用戶體驗(yàn)不好
本文是自己根據(jù)項(xiàng)目經(jīng)驗(yàn)總結(jié)的方案，如有不足嗓奢，歡迎指出~
在不斷努力下讼撒，最終優(yōu)化成果：
優(yōu)化
SSR
SSR(Server-Side Rendering) 即服務(wù)端渲染，把 vue 組件在服務(wù)器端渲染為組裝好的 HTML 字符串蔓罚，然后將它們直接發(fā)送到瀏覽器椿肩，最后需要將這些靜態(tài)標(biāo)記混合在客戶端上完全可交互的應(yīng)用程序。
使用 ssr 重新部署構(gòu)建項(xiàng)目后：
可以看到返回的內(nèi)容就已經(jīng)包含了首屏內(nèi)容的 html 代碼塊豺谈，perfect!.
極速傳送門： 基于vue-cli4.0+Typescript+SSR的小Demo
按需引入
使用 es6 module 進(jìn)行按需引入
1. 路由文件中按需引入組件
# router.index.ts
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
},
],
});
}
2. 靜態(tài)庫按需引入模塊郑象，而不是全部
如 element-ui 庫中，我只想用 button 組件 ：
import {
button
} from 'element-ui';
請(qǐng)求優(yōu)化
1. css茬末、js 放置順序
css 文件放 header 中厂榛，js 文件放 body前盖矫，不過 vue 已經(jīng)幫我們處理好了~
2. 使用字體圖標(biāo)，icon 資源使用雪碧圖
我們知道 http 建立一次連接需要 3 次握手击奶，太多的請(qǐng)求會(huì)影響加載速度
對(duì)不必要的靜態(tài)資源我們應(yīng)該盡量減少辈双，比如頁面中的 icon 圖標(biāo)，如下騰訊官網(wǎng)的一個(gè)圖片：
直接引入一張完成的圖片柜砾，根據(jù) background-position 來設(shè)置圖片的位置
推薦一個(gè)制作雪碧圖的網(wǎng)站： CSS Sprites Generator
CDN 加速
CDN(Content Delivery Network)湃望，即內(nèi)容分發(fā)網(wǎng)絡(luò)，構(gòu)建在現(xiàn)有網(wǎng)絡(luò)基礎(chǔ)之上的智能虛擬網(wǎng)絡(luò)痰驱，依靠部署在各地的邊緣服務(wù)器证芭，通過中心平臺(tái)的負(fù)載均衡、內(nèi)容分發(fā)担映、調(diào)度等功能模塊废士，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞蝇完，提高用戶訪問響應(yīng)速度和命中率官硝。
靜態(tài)資源都上傳到 CDN，可以極大地提高訪問速度
不使用 CDN：
使用 CDN：
可以看到使用 CDN后短蜕， 下載度度極大的提高
靜態(tài)資源壓縮氢架、開啟 GZIP 壓縮
對(duì) css、js朋魔、圖片等資源進(jìn)行壓縮达箍，并且服務(wù)器開啟 GZIP 壓縮
可以看到，壓縮過后铺厨，源文件 1.7M 變?yōu)?285kb，體積大大減小
入口 chunk 優(yōu)化
拆分入口 chunk 文件硬纤，分離出一些靜態(tài)的庫解滓，既可以加速打包，也可以優(yōu)化加載筝家。
如下洼裤，分離了一些靜態(tài)庫：vuejs、axios溪王、vuex等腮鞍，可以看到瀏覽器將開啟多個(gè)下載線程進(jìn)行下載。若沒有分離這些靜態(tài)庫莹菱，入口 chunk 將十分巨大移国，加載速度可想而知.
分離一個(gè) element-ui 庫，dev 環(huán)境我們不用管道伟，prod 環(huán)境下我們才分離迹缀，只需要在 vue 打包配置中移除該庫即可：
# vue.config.js
configureWebpack: {
externals:
process.env.NODE_ENV === 'production'
? {
'element-ui': 'element-ui',
}
: undefined,
},
# index.html 手動(dòng)引入靜態(tài)資源
<script src="/js/element-ui/element-ui.2.11.1.js"></script>
END
