再谈 webpack build 及加载优化

之前项目多,事情忙,一直没时间写博客,现在空闲下来了,总结一下

之前讲过了关于 build 压缩文件的方法,有兴趣的可以看下: 点击查看

现在讲讲一个页面的首屏加载速度该如何提升

提前说明需要 webpack-bundle-analyzer 插件来进行 build 文件的分析

异步文件和必须文件

首先是异步文件,可以按功能分,也可以按照路由分块,目的就是尽量较少首次加载的必须代码的大小

即登录,注册和必须存在的组件是必须加载组件,优先度最高,这些组件是不能为异步的,其他尽量都要设置为异步组件

如果你的项目足够小,一个 main 文件总共200k 那么可以不使用分块(仅限 web 端,移动端另说)

因为我使用的是 react+antd 还有一些附带的大包如 immutable,moment,babel-polyfill等,而且最重要的是这些包是必须的,大小快接近1M了

当然我是不会将接近 1M 的必需文件放在一个加载包里的,这样的话首屏加载恐怕要2S以上了

这个时候 webpack 的分块功能就出来了

一般来说浏览器的并发数量是6个资源,webpack 生成文件呢,至少会有一个 css 文件会在 head 加载;

去除 css 剩余5个位置 1000k/5 = 200k 所以将 1000k 的必需文件包平均分成5分,并发加载

速度即可缩短至 1/5 (当然这是理想状态)

简单解释一下: 1个人搬10公斤货物,需要 1个小时,但是现在一个线程就是一个人,就变成了5个人搬10公斤货物,速度就只要20分钟了

现在简介一下 webpack3 和 webpack4 该怎样分块:

webpack3:

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      minChunks(module) {

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          !new RegExp('/antd/lib|/react-dom|/moment').test(module.resource) &&

          module.resource.indexOf(

            path.join(__dirname, '../node_modules')

          ) === 0

        )

      }

    })

类似于这样 RegExp 中的表示不会被加到这个包中,有一点需要注意,剩余的会自动加在默认包里,所以我前面才会说需要 webpack-bundle-analyzer;

因为想要达到最佳状态,需要根据插件的页面多次试验分块

webpack4:

    splitChunks: {

      cacheGroups: {

        vendor: {

          test(chunks){

            return !new RegExp('/antd/lib|/react-dom|/moment').test(chunks.context) &&  /[\\/]node_modules[\\/]/.test(chunks.context)

          },

          name: "vendor",

          chunks: "all",

          reuseExistingChunk: true

        }

      }

    }

webpack4 和 3 的道理差不多,只是格式不一样罢了

prefetch , preload ,dns-prefetch

这两个的作用,虽然网上现在也是一搜一大把,我还是在这里说下他的作用和我简单的心得和体会

preload

表示浏览器一检测到该条脚本就会对服务器进行请求,通常会写在上部,因为越先检测就越先加载

prefetch

表示浏览器一检测到该条脚本就会在空闲的时候,下载脚本,并缓存到disk

dns-prefetch

表示浏览器一检测到该条脚本就会解析CDN的地址的DNS放的位置越前越好

所以他们分别作用的块是这样的:

必须模块和 cdn 模块需要的是preload
异步模块需要的是 prefetch 记住最好是所有异步模块都加上
使用dns-prefetch前提是你必须先知道域名是什么,而且更换域名时也要同步更换,效果立竿见影，加快页面加载时间

下面放上一个标准使用方法:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>title</title>

  <link rel="dns-prefetch" href="//www.grewer.cn/">

  <link rel="preload" as="script" href="/static/js/module1.js" >

  <link rel="preload" as="script" href="/static/js/module2.js">

  <link rel="preload" as="script" href="/static/js/module3.js">

  <link rel="preload" as="style" href="/static/css/main.css">

  <link rel="prefetch" href="/static/js/async1.chunk.js">

  <link rel="prefetch" href="/static/js/async2.chunk.js">

  <link rel="prefetch" href="/static/js/async3.chunk.js">

  <link rel="prefetch" href="/static/js/async4.chunk.js">

  <link rel="prefetch" href="/static/js/async5.chunk.js">

  <link rel="prefetch" href="/static/js/async6.chunk.js">

  <link href="/static/css/main.css" rel="stylesheet">

</head>

<body>

<script type="text/javascript" src="/static/js/module1.js" ></script>

<script type="text/javascript" src="/static/js/module2.js" ></script>

<script type="text/javascript" src="/static/js/module3.js" ></script>

</body>

</html>

http2 服务器推送

http2出来大概3年了吧,大多数人都以为他的作用就是加密就 HTTPS 而已,其实他还有一个最重要的功能,服务器推送

服务器推送的基础是 HTTP2,所以需要先升级然后需要再服务器配置,一旦有客服端请求文件,如 index.html

就可以将文件立马推送,而且关键还是他没有并发限制,比如图片,你可以一下子推送10个,20个,任意个文件! 只有客户端需要的

效果如下:

(图片来自网络,如果挂了还请自行寻找)

但是配合 webpack 还有一个问题,就是 webpack 生成的文件会带有 hash 参数,比如这样的文件名: /static/js/system.9b7a5941.chunk.js

要推送文件需要知道文件的名称(也许可以自动化,但是我不怎么了解)

这个问题的解决就交给大家了

不过即使没有服务器推送,有 preload也是十分好用了

结语

减小请求时间的方法有很多,还请大家酌情使用