Explore SEO and VUE first screen rendering and its solutions

4. Precompile the prerender-spa-plugin

• Nuxt will use its set of constraints, that is to say, your project will migrate to Nuxt, is it only SSR to solve SEO problems? You can also do pre-render
• Also, is the webpack precompilation, you can load the home page first, and then he slowly to load js files, so that there is no need to wait for the home page to load
• Server-side rendering to solve the problem, not only the HTML page to the browser, more importantly, after processing dynamic logic and JS code, will render the complete HTML to the browser, rendering process in the server.
• Pre-render, is the use of build tools in webpack to generate static HTML, directly to the browser, the rendering process is local.
• There are two types of pre-rendered plugins that cannot be used: lots of routing and dynamic content
• Let’s take a look at prerender-spa-plugin for pre-compilation
• Installation:

• cnpm install prerender-spa-plugin --saveCopy the code

• The vue – cli3.0 way
• Increase in the vue – config. Js

• const PrerenderSPAPlugin = require('prerender-spa-plugin');
  const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  const path = require('path');
  module.exports = {
      configureWebpack: config => {
          if(process.env.NODE_ENV ! = ='production') return;
          return{ plugins: [new PrerenderSPAPlugin({// the path of the PrerenderSPAPlugin can be the same as that of the webpakc package. // The path of the PrerenderSPAPlugin can only be one level. StaticDir: path.join(__dirname,'dist'), // Corresponding to its own routing file. For example, if a has parameters, write /a/param1. routes: ['/'.'/product'.'/about'Renderer: new renderer ({inject: {foo:) renderer: new renderer ({inject: {foo:)'bar'
                          },
                          headless: false, // Document.dispatchEvent (new Event()'render-event'), the event names of the two should correspond. renderAfterDocumentEvent:'render-event'})}),]}; }}Copy the code

• Add it to main.js

• new Vue({
    router,
    store,
    render: h => h(App),
    mounted () {
      document.dispatchEvent(new Event('render-event'))}}).$mount('#app')Copy the code

• Router. js set mode to “history”
  
  
  Note: Routing mode on official documentation must be
  history. If you do not set history mode, you can run and generate files, and the contents of each index.html file will be the same. So you have to use
  historymodel
• Run NPM run build to see if the generated dist directory has a folder for each route name. Then find a directory in index.html and open it with the IDE to see if the file has the content it should have. If so, the setup is successful
• After packaging, the picture is as follows:

• 
  
  

• 
  
  

• It was nice to realize that I had been using Gzip to compress files

• The vue – cli2.0 way
• Modify the WebPack configuration, which is relatively easy to complete

• const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderermodule.exports = {
      plugins: [
        //...   
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          outputDir: path.join(__dirname, 'prerendered'),
          indexPath: path.join(__dirname, 'dist'.'index.html'),
          routes: ['/'.'/about'.'/some/deep/nested/route'],
          postProcess(renderedRoute) {
            renderedRoute.route = renderedRoute.originalPath
            renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('> <')
            if (renderedRoute.route.endsWith('.html')) {
              renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route)
            }
            return renderedRoute
          }, minify: {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            decodeEntities: true, keepClosingSlash: true,
            sortAttributes: true
          },
          renderer: new Renderer({
            inject: { foo: 'bar' },
            maxConcurrentRoutes: 4
          })
        })
      ]
    }Copy the code

• It is not too cool, the speed is much faster, basically 1 second can display the home page, interested partners quickly use in the project!!

The difference between the two

• Server SSR rendering to solve the problem, not only the HTML page to the browser, more importantly, after processing dynamic logic and JS code, will render the complete HTML to the browser, rendering process in the server.
• Pre-render, is the use of build tools in webpack to generate static HTML, directly to the browser, the rendering process is local. Bringing the server side up to build time to compile HTML reduces the pressure on the server side
• Commonality: loading speed is the same; Less invasive;
• Different: server render on server; It is suitable for complex and large websites with frequent interaction with the server, such as e-commerce pre-rendering on the client; This works for simple static pages
• Very strange point is: open F12, found the refresh is very slow, turn off F12, refresh is very fast, I do not know what is serious, know students share in the comment section below!

The final summary

To seo, use SSR server rendering, that is, the server generates static pages to the client, please combine Nuxt interaction; Or instead of rendering on the server, use webpack’s prerender-spa-plugin to precompile static HTML directly to the browser, rendering locally. Optimize home page rendering or Vue sharding using Webpack’s Code Splitting load compression on demand