ESBuild压缩CSS引发的一个兼容性Bug的解决姿势

最新推荐文章于 2024-04-28 17:46:18 发布
VIP文章 最新推荐文章于 2024-04-28 17:46:18 发布
阅读量855 收藏
点赞数
分类专栏： 前端工程化 文章标签： css bug 前端 esbuild webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crper/article/details/126167337
版权

前言

测试小伙伴们在集成测试中反馈了一个问题，Safari 12访问项目个别页面场景样式错乱了。
我的第一直觉认为postcss那边处理出了问题，最后发现并不然，且听我道来！

问题背景

公司前端工程是基于webpack体系的，为什么会引入esbuild来处理css的部分压缩工作，主要是为了解决一个长期出现的疑难问题；内部样式注入页面的方式把有部分我们不要的东西打到标品了。而esbuild-loader介入到构建流程，就可以中途处理这些【压缩，去除sourcemap这些】！况且而且esbuild足够快，又能解决使用场景，何乐而不为!

目前暴露的一个问题就是会把css样式偏移量传统的写法，采用现代化的特性替换，比如inset取代上下左右的偏移量!!!

环境信息

  • webpack : v4
  • esbuild : v0.14.1

Bug效果图

在这里插入图片描述

在这里插入图片描述

最低0.47元/天 解锁文章
crper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
[性能优化] 使用 esbuild 为你的构建提速
郊眠寺
09-20 1835
esbuild 是一个强大的工具，希望大家能充分使用起来， 为业务带来更大价值。好了，今天的内容就这么多，希望对大家有所启发。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
esbuild-svelte:一个esbuild插件来编译Svelte组件
04-28
一个简单的构建脚本看起来像import esbuild from 'esbuild' ;import sveltePlugin from 'esbuild-svelte' ;esbuild . build ( { entryPoints : [ 'app.js' ] , bundle : true , outfile : 'out.js' , plugins : [ ...
esbuild中文文档-快速入门（Getting Started）
专注前端、专注互联网、分享原创的博客
09-11 1051
受够了webpack缓慢的打包速度，越来越多的团队开始探索采用更加底层的语言来编写前端的打包工具，以此来突破JavaScript语言的瓶颈。esbuild便是其中非常具有代表性的工具之一，它采用Go语言编写，经过了vite和nest.js的检验，开创了构建工具性能的新时代。
极速 JavaScript 打包器：esbuild
俊刚的博客
01-05 1080
esbuild是一个快速、可扩展的JavaScript打包器和压缩器，它的目标是成为最快的打包器。它使用Go编写，可以在几乎瞬间内完成大多数项目的构建。在本文中，我们将深入了解esbuild，并探讨其如何实现如此出色的性能。
esbuild的使用及配置
weixin_66128399的博客
02-21 971
esbuild是一个「JavaScript」打包和压缩工具，核心目标是开创构建工具性能的新时代， 同时创建一个易于使用的现代构建工具。
esbuild 入门
lio-zero 的博客
04-27 848
esbuild 是一个快速的 JavaScript 打包器，主要目标是带来构建工具性能的新时代，并在此过程中创建易于使用的现代捆绑器。 esbuild 是一个用 Go 编写的快速而简单的 JavaScript 捆绑包，其主要特点有： 极速，无需缓存 ES6 和 CommonJS 模块 ES6 模块的 Tree Shaking JavaScript 和 Go 的 API TypeScript ...
ESBuild & SWC浅谈: 新一代构建工具
趣谈前端
05-11 477
大厂技术坚持周更精选好文首先, ESBuild & swc是什么?ESBuild[1]是基于Go语言开发的JavaScript Bundler, 由Figma前CTO Evan Wallace开发, 并且也被Vite用于开发环境的依赖解析和Transform.SWC[2]则是基于Rust的JavaScript Compiler(其生态中也包含打包工具spa...
esbuild-webpack-plugin:将esbuild用作Webpack的压缩程序
04-13
esbuild-webpack-plugin 将用作webpack的压缩程序。 为什么要这个包裹？ 。 安装 $ yarn add esbuild-webpack-plugin --dev Webpack配置 const ESBuildPlugin = require ( 'esbuild-webpack-plugin' ) . default ; module . exports = { optimization : { minimizer : [ new ESBuildPlugin ( ) , /** * Or customize ESBuild options like below: * * new ESBuildPlugin({target: "es5"}), * * For
前端项目启动 npm 安装 之 常见错误 意外解决了 一直报 esbuild 的问题，使程序正常运行
热门推荐
this_zq的博客
05-09 1万+
写在前面： 本文作为本人学习总结之用，同时分享给大家~ 个人前端博客网站：zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！ 通常要运行一个前端项目操作流程为： npm install （用于安装库，可以理解为初试化用的） npm start （启动项目） 1、 上面这两个为我们理想话的安装，实际上会遇到各种意想不到的bug，比如网络原因，这个时候我们要切换npm 的安装源： 参考：npm切换默认源 https://www..
Cesium打包入门(gulp与esbuild)
遨游在太空
12-26 2501
本文针对Cesium源码包的打包工具gulp和esbuild进行了初步探讨，属于入门篇。 首先简要介绍采用gulp+esbuild如何为多个源代码文件打包成一个单独文件，然后介绍了下Cesium中的源码包的结构，并简要分析了其打包的相关函数。
【总结】1793- 快速上手 Esbuild
pingan8787
09-03 167
相信很多小伙伴第一次使用 Vite 开发项目的时候，都会被它的速度震惊到。为什么 Vite 那么快呢？除了使用了 ES modules 之外，Vite 内部还使用了一个神器 —— esbuild。Esbuild 是由 Figma 联合创始人 Evan Wallace 于 2020 年开发的工具。它是一个速度极快的 JavaScript/CSS 打包器，相比已有的 Web 构建工具，它的构建速度快...
serverless-esbuild:less一个无服务器框架插件，以极快的esbuild捆绑JavaScript和TypeScript
04-21
:dashing_away: 无服务器构建 零配置JavaScript和TypeScript代码捆绑的无服务器插件，使用有前景的速度与激情捆绑器和压缩程序 特征 零配置：开箱即用，无需安装任何其他编译器或插件 支持具有转换限制的ESNext语法（请参见注意） 支持sls package ， sls deploy和sls deploy function 支持sls invoke local 与完美集成 注意：默认JavaScript语法目标设置为 ，因此所有都将支持最终捆绑包。 如果您仍在使用旧的lambda运行时，并且必须遵循它，可以使用esbuild target选项运行，请参阅以获取有关语法转换限制的更多详细信息。 安装 yarn add --dev serverless-esbuild # or npm install -D serverless-esbuild 将以下插件添加到您的serverles
umijs#plugins#IE兼容性初步解决方案1
07-25
引入对应的polyfill在 master 应用的global.js中引入对应的 polyfill, 如下：在 IE11 上调试如果需要在 Windows 及
Esbuild-bundler:s Esbuild是一个非常快速JavaScript捆绑器
05-27
:rocket: 什么是 用法 npm run build 捆绑输出文件
esbuild-plugin-postcss-literal:适用于esbuild的PostCSS标记的模板文字插件
05-05
esbuild-plugin-postcss-literal 标签模板文字插件的 。 安装 npm install esbuild-plugin-postcss-literal -D 用 button.css.js const styles = css ` . button { & . -primary { background : var ( --...
CSS:css简介
最新发布
qq_55630615的博客
04-28 289
给html设置样式,美化css,实现结构和样式的分离。
CSS_sass模块化、scss模块化
小歪博客
04-25 450
CSS_sass模块化、scss模块化
js动态设置css主题(Style-setProperty)
zarek_jiamu的博客
04-27 398
定义的参考色，在开发的过程中希望后端人员能遵循// 用于按钮点击颜色num
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1293
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
esBuild watch
03-29
esBuild是一个速、可扩展的JavaScript和TypeScript构建工具。它支持实时构建和热模块替换（HMR），可以大大提高开发效率。esBuild watch是esBuild提供的一个命令，用于在开发过程中监视文件的变化并自动重新构建。 使用esBuild watch，你可以在终端中运行以下命令： ``` esbuild --watch ``` 这将启动esBuild的监视模式，它会监视指定目录下的文件变化，并在文件发生更改时自动重新构建。你可以通过添加参数来指定要监视的文件或目录，例如： ``` esbuild --watch src/main.js ``` 这将只监视`src/main.js`文件的变化。 esBuild watch还支持其他一些选项，例如指定输出目录、指定构建目标等。你可以通过运行`esbuild --help`命令来查看所有可用选项和用法示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

crper

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值