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服务

最后编辑于：2020.06.28 18:04:07