性能优化-webpack配置gzip

这篇具有很好参考价值的文章主要介绍了性能优化-webpack配置gzip。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

3步搞定,实测1.3Mjs压缩到363k,体积减少70%
1.装包
yarn add compression-webpack-plugin --dev
2.配置webpack
打开config/webpack.config.js
1)在 module.exports 导出函数前面引入插件

// gzip插件
const CompressionPlugin = require("compression-webpack-plugin");

2)添加配置
位置,搜索new HtmlWebpackPlugin(在其上边添加配置文章来源地址https://www.toymoban.com/news/detail-611485.html

	plugins: [
      // gzip配置项
      new CompressionPlugin({
        filename: "[path][base].gz",
        algorithm: "gzip", // 算法
        test: new RegExp("\\.(js|css)$"), // 压缩 js 与 css
        threshold: 1024, // 只处理比这个值大的资源。按字节计算 10240
        minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
      }),

      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(

到了这里,关于性能优化-webpack配置gzip的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

    这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。 (1)对 webpack 的理解 webpack 为啥提出 + webpack 是啥 + webpack 的主要功能 前端开发通常是基于模块化的,为了提高开发效率,webpack 是一个基于模块的构建工具,是一个用于 js 应用程序的静态模块

    2024年02月20日
    浏览(58)
  • webpack基础知识八:说说如何借助webpack来优化前端性能?

    一、背景 随着前端的项目逐渐扩大,必然会带来的一个问题就是性能 尤其在大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至奔溃 一般项目在完成后,会通过webpack进行打包,利用webpack对前端项目性能优化是一个十分重要的环节 二、如何优

    2024年02月14日
    浏览(40)
  • 前端知识点、技巧、webpack、性能优化(持续更新~)

    可以把  图片转换成  base64  放在src里面   减少服务器请求  但是图片会稍微大一点点 以上的方法不需要一个一个自己转化 可以在webpack  进行 性能优化   (官网有详细描述)

    2024年03月10日
    浏览(46)
  • 用webpack做一些前端打包时的性能优化

    一.webpack 的五个核心概念 1.Entry:入口指示,webpack以哪个文件为入口起点开始打包,分析构建内部依赖图 2.output:输出指示,webpack打包后的资源bundles输出到哪里去,以及如何命名 3.loader :loader让webpack能够去处翻译理那些非js文件(img css…) 4.Plugins :Plugins插件可以用于执行范围

    2024年02月12日
    浏览(50)
  • Web 前端性能优化之三:加载优化

    2、加载优化 1、延迟加载 本着节约不浪费的原则,在首次打开网站时,应尽量只加载首屏内容所包含的资源,而首屏之外涉及的图片或视频,可以等到用户滚动视窗浏览时再去加载。以上就是延迟加载优化策略的产生逻辑,通过延迟加载“非关键”的图片及视频资源,使得页

    2024年04月26日
    浏览(46)
  • nginx开启Gzip压缩,Vue性能优化之使用gzip压缩打包

    不管是vue项目还是react项目在使用webpack打包之后都会生成一个动辄一两兆甚至更大的js文件,在某些情况下严重影响项目性能,打开页面的时候白屏时间会很长,本文将介绍如何使用gzip压缩打包,主要是nginx部署的配置,非常重要,我查阅了很多文章基本都没用说清楚甚至错

    2024年02月02日
    浏览(44)
  • 前端面试:【网络协议与性能优化】提升Web应用性能的策略

    嗨,亲爱的Web开发者!构建高性能的Web应用是每个开发者的梦想。本文将介绍一些性能优化策略,包括资源加载、懒加载和CDN等,以帮助你提升Web应用的性能。 1. 性能优化策略: 压缩资源: 使用Gzip或Brotli等压缩算法来减小CSS和JavaScript文件的大小,加快加载速度。 合并文件

    2024年02月11日
    浏览(41)
  • Web 前端性能优化之七:数据存储与缓存技术

    7、数据存储 在开发Web应用的过程中,会涉及一些数据的存储需求,常见的存储方式可能有: 保存登录态的Cookie; 使用浏览器本地存储进行保存的Local Storage和Session Storage; 客户端数据持久化存储方案涉及的Web SQL和IndexedDB; 直接存储在本机的文件系统上等。 文件系统、Web

    2024年04月12日
    浏览(43)
  • webpack的性能优化(一)——分包优化

            默认情况下,Webpack 会将所有代码构建成一个单独的包,这在小型项目通常不会有明显的性能问题,但伴随着项目的推进,包体积逐步增长可能会 导致应用的响应耗时越来越长 。归根结底这种将所有资源打包成一个文件的方式存在两个弊端: 「 资源冗余 」 :客

    2024年02月02日
    浏览(43)
  • nginx上web服务的基本安全优化、服务性能优化、访问日志优化、目录资源优化和防盗链配置简介

    目录 一.基本安全优化 1.隐藏nginx软件版本信息 2.更改源码来隐藏软件名和版本 (1)修改第一个文件(核心头文件),在nginx安装目录下找到这个文件并修改 (2)第二个文件 (3)第三个文件,内置响应信息页面 (4)第四个文件 (5)重新编译安装并重启 3.更改nginx服务的默

    2024年02月13日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包