以前项目多,事情忙,一直没时间写博客,如今空闲下来了,总结一下javascript
以前讲过了关于 build 压缩文件的方法,有兴趣的能够看下: 点击查看css
如今讲讲一个页面的首屏加载速度该如何提高html
首先是异步文件,能够按功能分,也能够按照路由分块,目的就是尽可能较少首次加载的必须代码的大小
即登陆,注册和必须存在的组件是必须加载组件,优先度最高,这些组件是不能为异步的,其余尽可能都要设置为异步组件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 的道理差很少,只是格式不同罢了
这两个的做用,虽然网上如今也是一搜一大把,我仍是在这里说下他的做用和我简单的心得和体会
表示浏览器一检测到该条脚本就会对服务器进行请求,一般会写在上部,由于越先检测就越先加载
表示浏览器一检测到该条脚本就会在空闲的时候,下载脚本,并缓存到disk
表示浏览器一检测到该条脚本就会解析CDN的地址的DNS放的位置越前越好
因此他们分别做用的块是这样的:
下面放上一个标准使用方法:
<!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出来大概3年了吧,大多数人都觉得他的做用就是加密就 HTTPS 而已,其实他还有一个最重要的功能,服务器推送
服务器推送的基础是 HTTP2,因此须要先升级 而后须要再服务器配置,一旦有客服端请求文件,如 index.html
就能够将文件立马推送,并且关键仍是他没有并发限制,好比图片,你能够一会儿推送10个,20个,任意个文件! 只有客户端须要的
效果以下:
(图片来自网络,若是挂了还请自行寻找)
可是配合 webpack 还有一个问题,就是 webpack 生成的文件会带有 hash 参数,好比这样的文件名: /static/js/system.9b7a5941.chunk.js
要推送文件须要知道文件的名称(也许能够自动化,可是我不怎么了解)
这个问题的解决就交给你们了
不过即便没有服务器推送,有 preload也是十分好用了
减少请求时间的方法有不少,还请你们酌情使用