前端性能优化是提升用户体验的关键环节。本文汇集了Vue首屏加载优化、图片渐进式加载、SSR服务端渲染以及Gzip压缩等多个方向的实用资源与配置示例，供开发者参考使用。

Vue

图片

plugins

简单的改造SEO（预渲染

ERROR: Failed to download Chromium

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 推荐使用cnpm安装prerender
const PrerenderSpaPlugin = require("prerender-spa-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  publicPath: "/",
  outputDir: "server/dist",
  assetsDir: "static",
  productionSourceMap: false,
  lintOnSave: false,
  configureWebpack: config => {
    // seo 预渲染
    const prerender = new PrerenderSpaPlugin(config.output.path, ["/", "/login"]);
    // 会渲染login页面
    const gzip = new CompressionPlugin({
      test: /\.js$|\.html$|\.css/, //匹配文件名
      threshold: 10240, //对超过10k的数据进行压缩
      deleteOriginalAssets: false
    });
    if (process.env.NODE_ENV === "production") {
      config.mode = "production";
      return {
        plugins: [prerender, gzip]
      };
    }
  }
};