首页 > PHP资讯 > HTML5培训技术 > 前端性能优化 - 压缩文件

前端性能优化 - 压缩文件

HTML5培训技术

压缩文件可以减少文件下载时间,让用户体验性更好。
得益于 webpack 和 node 的发展,现在压缩文件已经非常方便了。
在 webpack 可以使用如下插件进行压缩:


JavaScript:UglifyPlugin
CSS :MiniCssExtractPlugin
HTML:HtmlWebpackPlugin


其实,我们还可以做得更好。那就是使用 gzip 压缩。可以通过向 HTTP 请求头中的 Accept-Encoding 头添加 gzip 标识来开启这一功能。当然,服务器也得支持这一功能。
gzip 是目前最流行和最有效的压缩方法。举个例子,我用 Vue 开发的项目构建后生成的 app.js 文件大小为 1.4MB,使用 gzip 压缩后只有 573KB,体积减少了将近 60%。
附上 webpack 和 node 配置 gzip 的使用方法。


下载插件


webpack 配置


node 配置

以上文章来自 欣才IT学院 www.thinksite.cn 更多信息请联系QQ:1017715299,TEL 13951835965(微信同号)

本文由欣才IT学院整理发布,未经许可,禁止转载。