关于前端性能优化一些总结

gzip 压缩效率非常高，通常可以达到 70% 的压缩率，也就是说，如果你的网页有 30K，压缩之后就变成了 9K 左右。

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

线上项目自然不应该被看到控制台的打印日志,所以我们需要将 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 } },
     })
   )
 }

由于打包后的文件经过了压缩、合并、混淆、babel编译后的代码不利于定位分析bug。

module.exports = {
  productionSourceMap: false,
}

使用 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端的产品来说，是不可行的。

所以很多公司都会通过服务端渲染（***）或是 预渲染的方式来解决这两点问题，由于公司技术栈原因，我们采用预渲染的方式来做优化。

什么是预渲染？

简单说，就是将浏览器解析 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 文件的内容都会是一样的。

server {
    listen 443 ssl http2;
}

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

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

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

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

<script src="a.js" ></script>

<script src="d.js" defer></script>
<script src="e.js" defer></script>

<script src="b.js" async></script>
<script src="c.js" async></script>

function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "https://www.3tt.net/?mod=artinfo&aid=736data:image/webp;base64," + kTestImages[feature];
}