vue终极性能优化方案(解决首页加载慢问题)

{
    path: '/chinaWine',
    name: 'chinaWine',
    component: resolve => require(['./views/chinaWine'], resolve)
},

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        return {
            plugins: [new CompressionPlugin({
                test: /\.js$|\.html$|\.css/,
                threshold: 10240,
                deleteOriginalAssets: false
            })]
        }
    }
}

http {
    gzip  on;
    gzip_min_length    1k;
    gzip_buffers        4 8k;
    gzip_http_version  1.0;
    gzip_comp_level    8;
    gzip_proxied        any;
    gzip_types          application/javascript text/css image/gif;
    gzip_vary          on;
    gzip_disable        "MSIE [1-6]\.";
    #以下的配置省略...
}

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

在plugins下面，找到plugins对象，直接加到上面就行
// 预渲染配置
new PrerenderSPAPlugin({
    //要求-给的WebPack-输出应用程序的路径预渲染。
    staticDir: path.join(__dirname, 'dist'),
    //必需，要渲染的路线。
    routes: ['/login'],
    //必须，要使用的实际渲染器，没有则不能预编译
    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        headless: false, //渲染时显示浏览器窗口。对调试很有用。  
        //等待渲染，直到检测到指定元素。
        //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
        renderAfterDocumentEvent: 'render-event'
    })
})

mounted () {
    document.dispatchEvent(new Event('render-event'))
 },

location = / {
  try_files /home/index.html /index.html;
}

location / {
  try_files $uri $uri/ /index.html;
}