【面试题】如何解决 Vue首屏加载过慢出现长时间白屏？

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件
module.exports = {
    plugins:[
        new CompressionPlugin({//gzip压缩配置
            test:/.js$|.html$|.css/,//匹配文件名
            threshold:10240,//对超过10kb的数据进行压缩
            deleteOriginalAssets:false,//是否删除原文件
        })
    ]
}
复制代码

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;预渲染
复制代码

module.exports = {
    ...
    externals: {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
    }    
    ...
}
复制代码

...
// 注释掉
// Vue.use(Vuex)
...
复制代码

// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(VueRouter)
...
复制代码

import Vue from 'vue'
import ELEMENT from 'element-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import 'mint-ui/lib/style.css'
import echarts from 'echarts'
import download from './mixin/download'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import '@/static/css/reset.css'
import '@/static/css/font.css'
import '@/assets/fonts/font.css'
Vue.config.productionTip = false
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
复制代码

    yarn add prerender-spa-plugin -D
    or npm install prerender-spa-plugin --save-dev
复制代码

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'
        })
      })
    ]
  };
}
复制代码

new Vue({
  router,
  store,
  render: h => h(App),
  // 添加mounted，不然不会执行预编译
  mounted () {
  document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')
复制代码

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;
}
复制代码

<div style="display: none;">
  <a href="/about/about-.../">...</a>
  <a href="/home/">home</a>
  <a href="/clubs/">home</a>
</div>
复制代码