怎么让网站运行变慢一点?

html-css023

怎么让网站运行变慢一点?,第1张

好奇心日报无论是设计还是内容都追求高品质,于是丰富的图文混合成了标配:首页的banner图,文章详情页的配图,研究所有趣的gif图等等。

特别严重的时候,一篇文章有十多个gif图,加载花费的时间10-20秒之长,加载消耗的流量几十M之多,严重影响了用户体验!尤其是Mobile端,一寸流量一寸金;3-5s打不开页面,用户都会直接逃离。所以网页加载速度优化势在必行!

我们都知道一个网页的加载流程大致如下:

1、解析HTML结构。

2、加载外部脚本和样式表文件。

3、解析并执行脚本代码。// 部分脚本会阻塞页面的加载

4、DOM树构建完成。//DOMContentLoaded 事件

5、加载图片等外部文件。

6、页面加载完毕。//load 事件

一句话就是:请求HTML,然后顺带将HTML依赖的JS/CSS/iconfont等其他资源一并请求过来。

那么优化网页的加载速度,最本质的方式就是:减少请求数量 与 减小请求大小。

减少请求数量

1、将小图标合并成sprite图或者iconfont字体文件

2、用base64减少不必要的网络请求

3、图片延迟加载

4、JS/CSS按需打包

5、延迟加载ga统计

6、等等...

减小请求大小

1、JS/CSS/HTML压缩

2、gzip压缩

3、JS/CSS按需加载

4、图片压缩,jpg优化

5、webp优化 &srcset优化

6、等等...

按需加载,可样式是写在.vue模板中的,访问另一个页面样式就会追加到head标签中,访问的越多head标签的style标签也就越多,即便style标签加入scoped可以避免样式冲突:

后来我查了下有使用extract-text-webpack-plugin将css提取合并的。

这个代码:

import 'xx.css' or require('xx.css')

mini-css-extract-plugin 在 webpack4 中代替 extract-text-webpack-plugin ,此插件是 将 CSS 样式提取到单独的文件 中。 它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。即通过 JS 文件中 import 进来的样式文件。它支持 CSS 和 SourceMaps 的按需加载。

是建立在新的 webpack v4 功能(模块类型)之上,并且需要在 webpack 4 版本才能工作。

相比 extract-text-webpack-plugin :

基本配置如下(webpack.config.js):

高级配置如下(既可以在开发中使用 HMR,也可以在生成版本的文件中提取样式):

生产环境优化压缩(production)

缩小输出,要使用像 optimize-css-assets-webpack-plugin 这样的插件。 设置 optimization.minimizer 会覆盖 webpack 提供的默认值,因此确保要指定 JS minimalizer :

将所有 CSS 样式提取到单个文件中,与 extract-text-webpack-plugin 类似,可以使用 optimization.splitChunks.cacheGroups 。

还可以根据 webpack 的 entry name 来提取CSS,这对你动态引入路由,却想依据 entry 保存打包的 CSS 的情况十分有用。这也解决了 ExtractTextPlugin 中 CSS 重复的问题。

特别注意