首屏优化

代码分割

主要技术：webpack、react

代码分隔可以将一个大大bundle文件拆分成多个小的chunks（块），来达到按需加载，减少首次加载的时间，加快首屏显示。

webpack

SplitChunksPlugin可以用来自动分割公共模块和第三方库。

optimization: {
  splitChunks: {
    chunks: 'all', // 可以是`async`（仅分割异步加载模块），`initial`（仅分割初始加载模块），或`all`（两者都分割）
    minSize: 20000, // 生成chunk的最小体积（以字节为单位）
    minChunks: 1, // 在分割之前，模块被共享的最少次数
    maxAsyncRequests: 30, // 按需加载时的最大并行请求数
    maxInitialRequests: 30, // 入口点的最大并行请求数
    automaticNameDelimiter: '~', // 默认情况下，webpack将使用块的来源和名称生成名称（例如vendors~main.js）
    cacheGroups: { // 缓存组可以继承和/或覆盖splitChunks.*的任何选项
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
}

React

动态导入，也就是利用import()语法搭配webpackChunkName。

常规懒加载

const LazyComponent = React.lazy(() => import("./LazyComponent"));

动态导入

const LazyComponent = React.lazy(() =>
  import(/* webpackChunkName: "lazy-component" */ "./LazyComponent")
);
// 预加载
const AnotherComponent = React.lazy(() =>
  import(/* webpackPrefetch: true */ "./AnotherComponent")
);
// 预获取
const YetAnotherComponent = React.lazy(() =>
  import(/* webpackPreload: true */ "./YetAnotherComponent")
);

DNS预解析

由于DNS需要从域名查找到ip，所以需要消耗时间，特别是在客户端与服务器距离较远的情况下，或需要解析多个地址的资源时。

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

CDN部署

尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

GZIP加速

Gzip是一种数据压缩算法，可以压缩文件。目前主流浏览器都支持。

主要分两方面：项目Gzip 和服务器Gzip

项目Gzip

vue

首先安装插件compression-webpack-plugin

然后在vue.config.js配置开启gzip

// vue.config.js 配置开启gzip
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
    const plugins=[
    new CompressionPlugin({
        algorithm: 'gzip',// 压缩格式
        test: new RegExp(`\\.(${['js', 'css', 'json', 'html'].join('|')})$`),// 正则匹配文件后缀
        threshold: 1024 * 5,// 压缩阀值超过5KB时才压缩
        minRatio: 0.5//压缩比例缩小50%才采用
    })]
    return {
        plugins
    }
}

服务器开启Gzip

通过nginx配置开启

http {
    # 开启GZIP
    gzip on;
    # GZIP类型
    gzip_types text/plain application/x-javascript   application/javascript text/css application/xml text/javascript;
}

通知更新

hash

在资源后加上hash参数，来表示每次发布后hash不同。

思考：hash会不会破坏缓存机制

方案：不缓存index.html，在打包时就给每个资源进行hash标志，由于index.html文件很小，几乎只有1kb，所以缓存不缓存都无所谓。

优化记录