vue-web项目首页加载慢
路由懒加载 配置了一下少了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
主要配置这两个就行，因为已经在前端进行了几个大的指定文件的压缩，那么在后端配置开启gzip压缩和获取静态压缩文件即可，获取已有的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强缓存的优势：在页面强制刷新时可以拦截请求（http缓存会跳过强缓存）
- 类似提供了一层缓存cache storage的接口，可以进行更多的缓存命中，命中之后也可以进行资源的异步更新
- 无侵入式缓存，提供了一层sw.js进行缓存管理，同时可以对命中后的处理做自定义设计
- 可以提供服务推送、定时更新等功能
生命周期
- register注册，通过navigator.serviceWorker.register()进行区域注册，默认为js所在的根路径，当sw代码下载完毕则进入install安装阶段，所有文件被缓存到cache storage后则完成了准备工作，此前的代码只执行一次，缓存成功则安装成功 进入下一个周期
- active阶段 第二次加载或者调用clients.claim()控制所有客户端时，具备fetch match put 缓存命中以及请求的功能，当没有更新sw的时候一直都会处在一个当前的阶段直到更新才会进行再次的register周期
- waiting 等待更新阶段，在每次触发了新的sw生成会有一个waiting阶段进行等待，防止数据不一致的问题，可以通过self.skipWaiting() 或client.claims()进行强制结束waiting阶段，使用新register的sw提供缓存
触发更新事件： 到了一个新的作用域页面、调用了register()、24小时后调用了sync push等更新缓存的操作
简单的sw实现
https://zhuanlan.zhihu.com/p/28336800
SSR 和其他渲染
1、CSR client side render 客户端渲染，我们常用的，从服务端获取js，在客户端进行解析渲染页面，因为框架的原因，一个是慢，一个是不利于SEO
2、SSR server side render 服务端渲染，在服务端生成html模板返回，客户端直接渲染，增加了服务端的压力，现在一般用node实现，增加了运维成本
serverLess ssr 借助云端服务，通过调用云函数来调用后端，减少运维成本，云端可以自动伸缩
3、NSR native side render 分布式ssr，获取离线模板和ajax数据进行渲染，将渲染工作下放到移动设备
4、ESR edge side render 借助边缘计算能力，将动态资源和静态资源流式返回，如借助cdn进行静态资源缓存，在cdn上发起请求获取动态资源，将压力转移给了cdn服务
