再谈 webpack build 及 加载优化

以前项目多,事情忙,一直没时间写博客,如今空闲下来了,总结一下javascript

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

如今讲讲一个页面的首屏加载速度该如何提高html

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

异步文件和必须文件

首先是异步文件,能够按功能分,也能够按照路由分块,目的就是尽可能较少首次加载的必须代码的大小
即登陆,注册和必须存在的组件是必须加载组件,优先度最高,这些组件是不能为异步的,其余尽可能都要设置为异步组件java

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

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

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

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

通常来讲 浏览器的并发数量是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也是十分好用了

结语

减少请求时间的方法有不少,还请你们酌情使用

相关文章
相关标签/搜索