路由懶加載 配置了一下少了1M
首先配置為：
const portalSign = () => import("@/views/portal/home.vue")
需要一個babel來完成異步的import
cnpm install babel-plugin-syntax-dynamic-import -D
最后在.babelrc中配置plugins
"plugins": ["syntax-dynamic-import"]
devtool
配置Nginx支持壓縮文件
前端用compression-webpack-plugin進行文件壓縮可配置壓縮體積界限勃刨，如小于多少就不進行壓縮送矩，因為有些小文件是不需要進行壓縮的
nginx配置：https://blog.csdn.net/shangyuanlang/article/details/77964559
主要配置這兩個就行可缚，因為已經(jīng)在前端進行了幾個大的指定文件的壓縮焙压，那么在后端配置開啟gzip壓縮和獲取靜態(tài)壓縮文件即可打瘪，獲取已有的gzip文件贤壁，沒有則返回源文件
gzip on;
gzip_static on;
// 后面是server的配置
service worker緩存
https://zoumiaojiang.com/article/amazing-workbox-3/#workbox-webpack-plugin
使用了插件workbox-webpack-plugin配置
npm install --save-dev workbox-webpack-plugin
const workboxPlugin = require('workbox-webpack-plugin');
// ...
webpack({
plugins: [
// ...
new workboxPlugin({
swSrc: './src/sw.js',
swDest: './dist/sw.js',
globDirectory: './dist/',
globPatterns: ['**/*.{html,js,css}'],
})
]
// ...
});
- 相比于http強緩存的優(yōu)勢：在頁面強制刷新時可以攔截請求（http緩存會跳過強緩存）
- 類似提供了一層緩存cache storage的接口厦瓢，可以進行更多的緩存命中脉课，命中之后也可以進行資源的異步更新
- 無侵入式緩存，提供了一層sw.js進行緩存管理俩由，同時可以對命中后的處理做自定義設(shè)計
- 可以提供服務(wù)推送毒嫡、定時更新等功能
生命周期
- register注冊，通過navigator.serviceWorker.register()進行區(qū)域注冊幻梯，默認為js所在的根路徑兜畸，當sw代碼下載完畢則進入install安裝階段，所有文件被緩存到cache storage后則完成了準備工作碘梢，此前的代碼只執(zhí)行一次咬摇，緩存成功則安裝成功 進入下一個周期
- active階段 第二次加載或者調(diào)用clients.claim()控制所有客戶端時，具備fetch match put 緩存命中以及請求的功能煞躬，當沒有更新sw的時候一直都會處在一個當前的階段直到更新才會進行再次的register周期
- waiting 等待更新階段肛鹏，在每次觸發(fā)了新的sw生成會有一個waiting階段進行等待，防止數(shù)據(jù)不一致的問題恩沛，可以通過self.skipWaiting() 或client.claims()進行強制結(jié)束waiting階段在扰，使用新register的sw提供緩存
觸發(fā)更新事件： 到了一個新的作用域頁面、調(diào)用了register()雷客、24小時后調(diào)用了sync push等更新緩存的操作
簡單的sw實現(xiàn)
https://zhuanlan.zhihu.com/p/28336800
SSR 和其他渲染
1芒珠、CSR client side render 客戶端渲染，我們常用的搅裙，從服務(wù)端獲取js皱卓，在客戶端進行解析渲染頁面裹芝，因為框架的原因，一個是慢娜汁，一個是不利于SEO
2嫂易、SSR server side render 服務(wù)端渲染，在服務(wù)端生成html模板返回存炮，客戶端直接渲染炬搭，增加了服務(wù)端的壓力，現(xiàn)在一般用node實現(xiàn)穆桂，增加了運維成本
serverLess ssr 借助云端服務(wù)宫盔，通過調(diào)用云函數(shù)來調(diào)用后端，減少運維成本享完，云端可以自動伸縮
3灼芭、NSR native side render 分布式ssr，獲取離線模板和ajax數(shù)據(jù)進行渲染般又，將渲染工作下放到移動設(shè)備
4彼绷、ESR edge side render 借助邊緣計算能力，將動態(tài)資源和靜態(tài)資源流式返回茴迁，如借助cdn進行靜態(tài)資源緩存寄悯，在cdn上發(fā)起請求獲取動態(tài)資源，將壓力轉(zhuǎn)移給了cdn服務(wù)
