vue首页加载慢优化：预渲染prerender-spa-plugin使用，及解决编译报错,静态资源404，assetsPublicPath相对路径webpack配置问题

最近，终于有时间也有机会，去做一下vue框架的首页加载慢，白屏时间长的优化问题。具体优化方案很多，搜一下就有介绍。这儿重点介绍下预渲染的优化方式。

PreRender预渲染是此次优化的重点方式。

使用的是prerender-spa-plugin插件，git地址：https://github.com/chrisvfritz/prerender-spa-plugin

网上此控件的使用也有很多例子，可以自己找得到，但是真正打包上传到服务器这步的配置说明，几乎没有人提及。但是配置不对也是徒劳啊。

步骤：

1. 安装：npm install prerender-spa-plugin --save-dev

    

   1. 1. 安装时候需要装chrome的一个插件pupputeer，建议用淘宝镜像，或者cnpm

2. 引用：build=> webpack.prod.conf.js文件中引用下列代码：

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

   然后，在plugin中加入，其中routes里配置的是需要预渲染的路由，比如首页home

   new PrerenderSPAPlugin({
         staticDir: config.build.assetsRoot,
         routes: [  '/','/home'],
         outputDir: path.join(config.build.assetsRoot, config.build.assetsPublicPath),
         indexPath: path.join(config.build.assetsRoot, 'index.html'),
         renderer: new Renderer({
           inject: {
             foo: 'bar'
           },
           headless: false,
           renderAfterDocumentEvent: 'render-event',
         })
       })
   

    

3. 使用：

   1. main.js中调用document.dispatchEvent(new Event('render-event'))

      new Vue({
        el: '#app',
        router: router,
        store: store,
        template: '',
        components: { App },
          mounted () {
          // You'll need this for renderAfterDocumentEvent.
          document.dispatchEvent(new Event('render-event'))
        }
      })
      

4. .配置打包路径（这个是关键，不然编译一直报错，我在这儿卡了很久）

比如你最终打包发布的路径为test,那么需要修改如下配置

• webpack.base.conf.js中publicPath:’/test/’
• webpack.prod.conf.js中output{publicPath:’/’}
• config=>index.js中assetsPublicPath:’/test/’
• config=>index.js中assetsSubDirectory:’test/static’
• config=>index.js中assetsRoot: path.resolve(__dirname, "../dist")

这几个配置是关键！！

5，打包之后的dist目录里有/test/目录

之前打包后，一般只有一个index.html和static文件夹，现在多了个/home文件夹，就是之前配置的预渲染的路径

/home里面还有个index.html，就是预渲染的火车票首页,预渲染与否的区别就在于

里面有没有其他元素，有就说明是预渲染成功了，这样访问这个index.html就不用再渲染，所以速度自然是要快一点。

未预渲染的index.html

预渲染之后的index.html

6.上传oss

不用像网上教程里说的，非得访问预渲染的路径，直接将/home文件夹里面index.html和static包上传到oss的test路径即可。（这一步也试了好几次，才发现的） 

 这样也避免了项目打包前根目录的static包里的静态资源访问不到404的问题。

还有，也不必要像他们说的，路由模式不能用mode:hash，亲测可以。

7.预渲染效果

在用chrome，模拟慢3G网络，实测能比以前完全渲染完成快30%多

而且，预渲染是进来就会加载首页图片资源的，所以可以更快地完整展示

结语：

当然，解决vue首次加载慢，还可以ssr服务器渲染，或者加个gif图遮挡一下白屏也可以。

对于一般项目，建议预渲染+gif遮挡就可以达到流畅体验了。