需求场景：公司业务展示官网开发，构建版本后在外网测试环境下，发下首屏加载损耗高达几十秒（服务器在国外，所以也导致加载时间变长），于是采用了以下方法来达到提速目的。
问题攻克解决步骤如下：
1. 采用懒加载的方式（官网有所提及，这里就不做详细描述）
2. webpack开启gzip压缩文件传输模式：
- 2.1 gzip压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
- 2.2 webpack打包时借助 compression webpack plugin实现gzip压缩，安装插件如下：npm i -D compression-webpack-plugin
- 2.3 在vue-cli 3.0 中，vue.config.js配置如下：
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件
module.exports = {
plugins:[
new CompressionPlugin({//gzip压缩配置
test:/.js$|.html$|.css/,//匹配文件名
threshold:10240,//对超过10kb的数据进行压缩
deleteOriginalAssets:false,//是否删除原文件
})
]
}
- 2.4 服务器nginx开启gzip:
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6; #压缩级别:1-10，数字越大压缩的越好，时间也越长
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256; #gzip压缩最小文件大小，超出进行压缩（自行调节）
gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;预渲染
3. 依赖模块采用第三方cdn资源
- 3.1 在首页index.html中引入，如：
<script src="cdn.bootcss.com/vue/2.6.10/…">
<script src="cdn.bootcss.com/vuex/3.0.1/…">
<script src="cdn.bootcss.com/vue-router/…">
<script src="cdn.bootcss.com/element-ui/…">
- 3.2 修改vue.config.js，关于externals配置请自行查阅相关资料。
module.exports = {
...
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT'
}
...
}
- 3.3 修改 src/store/index.js
...
// 注释掉
// Vue.use(Vuex)
...
- 3.4 修改 src/router/index.js
// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(VueRouter)
...
- 3.5 修改 src/main.js
import Vue from 'vue'
import ELEMENT from 'element-ui'
// ...
// 注释掉
// Vue.use(ELEMENT)
router.afterEach(() => {
NProgress.done()
})
new Vue({
router,
store,
render: h => h(App),
// 添加mounted，不然不会执行预编译
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
这里element-ui变量名要用ELEMENT, 因为element-ui的umd模块名是ELEMENT
4. 预渲染
- 4.1 用到的插件：prerender-spa-plugin
yarn add prerender-spa-plugin -D
# or npm install prerender-spa-plugin --save-dev
- 4.2 vue.config.js中配置如下：
const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Render = PrerenderSpaPlugin.PuppeteerRenderer;
const path = require('path');
configureWebpack: () => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, 'dist'),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
routes: ['/', '/Login', '/Home'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
};
}
- 4.3 main.js中配置：
new Vue({
router,
store,
render: h => h(App),
// 添加mounted，不然不会执行预编译
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
- 4.4 首页加载一般进入的是路由首页，可以通过nginx配置，指向预渲染的首页静态页，nginx配置如下：
location = / {
root /data/release/pokio_web/client/dist;
try_files /home/index.html /index.html;
}
location / {
root /data/release/pokio_web/client/dist;
try_files $uri $uri/ /index.html;
}
5. 遇见的问题：
- 5.1 预渲染解决百度搜索引擎抓爬不到单页面子链接问题。可以把需要seo页面 写在页面中 隐藏起来。
<div style="display: none;">
<a href="/about/about-.../">...</a>
<a href="/home/">home</a>
<a href="/clubs/">home</a>
</div>
- 5.2 build 后发现 app.js 还是很大，发现问题是首屏引入的资源 svg 有个过大的文件 注意首屏引入的资源大小，这里也有一些优化资源的方式：
· 图片使用webp/base64
· 资源开启 CDN 资源加速
· 还可以适当开启link、img等资源的 preload 属性（浏览器进程的预加载机制）
