🌵 preface

Developing an official website project is not conducive to optimization due to the traditional multi-page development mode.

🎄 pre-rendered

Generating static pages using prerender-spa-plugin improves speed of page rendering and seo as follows

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

module.exports = {
 plugins: [new PrerenderSPAPlugin({  staticDir: path.join(__dirname, 'dist'),  routes: [ '/'].// The route needs to be pre-rendered,  renderer: new Renderer({  headless: true.// Open a headless browser  renderAfterDocumentEvent: 'render-event'.// Render event. The plugin will not start crawling HTML until this event is triggered  }),  })] } Copy the code
// Call the following method in app.vue, keeping the event name and renderAfterDocumentEvent in a similar lifecycle for other frameworks
export default {
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  }
}; Copy the code

Record on pit

Unable to prerender all routes!

Unable to prerender all routes! There are many reasons for this error. I set headless: true. [](file:///Users/zhengwei/Documents/Gridea/post-images/1590735278740.jpg)

Static resources use CDN

Since WE have used CDN, but we have not released it yet, there is no appropriate resource on CDN, which leads to page loading failure (the terminal will remain stuck and not respond).

This solution, Google a search also has a lot of solutions, the better way is to use proxy, the CDN address proxy to the local. I’ve read several articles that re-use Node as a proxy service, but prerender-spa-plugin can set up the proxy itself.

To implement the proxy, change the port number from the proxy server to 80, and change the mapping to 127.0.0.1 in the local host. After setting this, xxx.cdn.com/static/1.txt is equal to 127.0.0.1/static/1.txt

The specific code is as follows:

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

module.exports = {  plugins: [new PrerenderSPAPlugin({  staticDir: path.join(__dirname, 'dist'), Routes: ['/'], // Need prerendered route, renderer: new Renderer({ Headless: true, // Enable headless browserRenderAfterDocumentEvent: 'render - event', / / rendering events, only triggered this event, the plug-in will begin to climb in HTML }), + server: { + port: 80, // Set port to 80 + proxy: { + '/static: { + target: `http://localhost`, + changeOrigin: true, + pathRewrite: { + '^/static': '/' +} +} +} +}  })] } Copy the code

Now that we have the last step, we can’t change the host manually every time, so we’ll write a Node script to do it for us

// build.js
const util = require('util');
const exec = util.promisify(require('child_process').exec);
const hostile = require('hostile');

const cdnDomain = 'xxx.cdn.com';  process.env.FORCE_COLOR = true; // Turn on the color printed by the console  hostile.set('127.0.0.1', cdnDomain, async() = > { const { stdout, stderr } = await exec('vue-cli-service build');  console.log(stdout);  console.log(stderr);  hostile.remove('127.0.0.1', cdnDomain, () => process.exit(0)); }); Copy the code

Finally, Node build.js completes the packaging

Proxy problems caused by CDN

We thought we had solved the problem of CDN perfectly, but when some resources exist in CDN but do not exist locally, the use of proxy will cause problems.

The problem I encountered was that in order to optimize the size of the code, Vue vue-Router swiper and other external files were introduced using CDN, but I did not have these files locally. Due to the host modification, there is no other way to access the resources on the CDN.

The final solution was to store the files in a public folder, make sure they are accessible through proxies, and then use Git to ignore them and avoid publishing them.