前言

最近花了一些时间在游戏陪玩系统源码的性能优化上，背后做了很多工作，但是最后依然没有达到自己想要的结果，有些失望，但是还是记录下自己的执着。

游戏陪玩系统源码性能优化总结：减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式。

性能分类

对游戏陪玩系统源码前端工程性能的优化，我觉得可以分为两类：

  • 站在用户视角的主观的可感知的性能。
  • 站在开发者视角的可客观度量的性能。

感知性能

对于游戏陪玩系统源码的用户来说，用户的感知性能才是最重要的，简单讲，就是让用户感觉你的网站访问很快，并且感知性能没有衡量标准。

不过，凡事总有例外，如果游戏陪玩系统源码一个页面的加载时间就会很长，我们也可以通过一些方式让用户觉得没有那么慢。

总之一句话，你的页面可以做的不快，但是你可以让你的用户觉得你很快。

客观性能

对于游戏陪玩系统源码开发者来说，性能指标是可以客观度量的，我们可以通过一些手段来优化 Web 性能，使这些度量指标达到开发者设定的标准。

客观性能是指，从用户输入url开始，到下载、解析和执行所有资源以及最终绘制的整个过程的时间度量。

游戏陪玩系统源码性能指标是个很复杂的标准。

构建优化

gzip 压缩

gzip 压缩效率非常高，通常可以达到 70% 的压缩率。

//npm i -D compression-webpack-plugin
configureWebpack: config => {
  const CompressionPlugin = require('compression-webpack-plugin')
  config.plugins.push(new CompressionPlugin())
}

去除 console.log
游戏陪玩系统源码不应该被看到控制台的打印日志,所以我们需要将 console.log 都去除掉。

//npm i -D terser-webpack-plugin 
 configureWebpack: config => {
   const TerserPlugin = require('terser-webpack-plugin')
   config.optimization.minimizer.push(
     new TerserPlugin({
       extractComments: false,
       terserOptions: { compress: { drop_console: true } },
     })
   )
 }

去除 SourceMap
由于打包后的游戏陪玩系统源码文件经过了压缩、合并、混淆、babel编译后的代码不利于定位分析bug。

module.exports = {
  productionSourceMap: false,
}

CDN减少打包体积

使用 cdn 文件来减少游戏陪玩系统源码到打包体积，也可以按需加载。

在 /public/index.html 中引入需要的js和css文件
在这里插入图片描述
去掉 package.json 中对于 vue、element-ui 等相关资源的依赖

src/main.js ，去掉 vue、element-ui 等相关资源的 import 和 vue.use 这些语句
在这里插入图片描述
配置externals。由于使用 Vue Cli 3 默认配置，新建出来的项目没有了 build 目录，首先得在项目根目录下，新建 vue.config.js 文件，里面添加以下代码：

module.exports = {
    configureWebpack:{
        externals:{
            'Vue': 'Vue',
            'element-ui': 'element-ui',
            'clipboard':'VueClipboard'
        }
    }
}

预渲染

渲染方式分为三种，游戏陪玩系统源码客户端渲染，服务端渲染，预渲染。

我们默认的开发方式是通过游戏陪玩系统源码客户端渲染，但是客户端渲染页面内容，关键链路较长，首屏渲染会有一定延迟，并且对 SEO 非常不友好，对于C端的产品来说，是不可行的。
所以很多公司都会通过游戏陪玩系统源码服务端渲染（SSR）或是 预渲染的方式来解决这两点问题。

什么是预渲染？

简单说，就是将浏览器解析 javascript 动态渲染页面的这部分工作，在打包阶段就完成了，（只构建了静态数据）换个说法在构建过程中，webpack 通过使用 prerender-spa-plugin 插件生成静态结构的 html。

// npm i -D prerender-spa-plugin
 configureWebpack: config => {
   const path = require('path')
   const PrerenderSPAPlugin = require('prerender-spa-plugin')
   config.plugins.push(
     new PrerenderSPAPlugin({
       staticDir: path.join(__dirname, 'dist'),
       routes: ['/'],
       minify: {
         collapseBooleanAttributes: true,
         collapseWhitespace: true,
         keepClosingSlash: true,
         decodeEntities: true,
         sortAttributes: true,
       },
       renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
         renderAfterDocumentEvent: 'render-event',
         renderAfterTime: 5000,
         // headless: false,
       }),
     })
   )
 }

注意：路由模式必须为 history ，如果不设置 history 模式，也能运行和生成文件，每个 index.html 文件的内容都会是一样的。

资源预加载

简单说，提前加载资源，当游戏陪玩系统源码用户需要查看时可直接从本地缓存中渲染。
总结：对游戏陪玩系统源码当前页面需要的资源，使用 preload 进行预加载，对其它页面需要的资源进行 prefetch 预加载。

preload

preload 页面加载的过程中，在浏览器开始主体渲染之前加载。

<!-- 对sty1e.cs5和 index.js进行pre1oad预加载 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="index.js" as="script">

prefetch

prefetch 页面加载完成后，利用空闲时间提前加载。

<!--对资源进行 prefetch预加载-->
<link rel="prefetch" href="next.css">
<link rel="prefetch" href="next.js">

注意：vue-cli 默认开启 prefetch ，可在 vue.config.js 中全局禁用 prefetch ，再针对指定模块开启。

chainWebpack: config => {
  config.plugins.delete('prefetch')
}

dns-prefetch

游戏陪玩系统源码页面加载完成后，利用空闲时间提前加载。

<link rel="dns-prefetch" href="//example.com">

以上便是“游戏陪玩系统源码前端性能优化需要注意的几个要点”的全部内容，整理不易希望对大家有帮助。
本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理
原文链接：https://juejin.cn/post/6844904195707895816

更多文章请关注《万象专栏》