5.31 gzip与webpack版本兼容问题以及相关，BScroll基础deceleration，web动画性能优化，移动端分辨率pt和px，微信开发中px和Webpx问题

最新推荐文章于 2024-05-30 20:40:47 发布

原创最新推荐文章于 2024-05-30 20:40:47 发布 · 482 阅读

CC 4.0 BY-SA版权

本文详细介绍了前端项目中gzip压缩的正确配置方法，包括不同版本的webpack与compression-webpack-plugin插件的兼容性，以及如何在vue项目中实现gzip压缩。同时，文章探讨了BScroll滑动效果的调整技巧，避免动画与请求同步导致的卡顿问题，以及移动端分辨率pt与px的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，个人水平有限，仅限于使用webpack，并非了解原理。

1.1、gzip压缩与vue版本

如果使用vue init webpack xxx构建的项目，
开启 gzip: true
会提示你安装compression-webpack-plugin 插件，而这个插件已经更新到2.0+版本了。

compression2.0+版本匹配的是webpack4.0+版本。
compression1.0+版本匹配的是webpack3.0+版本。
如果使用vue create xxx构建的项目属于vue-cli3.0+库都是新的，配置项也是。

简言之：

vue init webpack xxx构建的项目，将webpack.prod.conf中gzip: true，且需要配合webpack3.0+，与 “compression-webpack-plugin”: "^1.1.11"版本配合，即可build。

vue create xxx构建的项目，开启gzip压缩，需要配合webpack4.0+，与 compression-webpack-plugin: 2.0+版本配合，然后在vue.config.js中配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
// 配置项
module.exports = {

  // 省略许多配置项...
  
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
  }
}

然后即可build
在这里插入图片描述

1.2 gzip前端开启生成gz，nginx自身先检测有无gz，若无，则进行压缩。

比如nginx给你返回js文件的时候，会判断是否开启gzip，然后压缩后再还给浏览器。但是nginx其实会先判断是否有.gz后缀的相同文件，有的话直接返回，nginx自己不再进行压缩处理。
而压缩是要时间的！不同级别的压缩率花的时间也不一样。
所以提前准备gz文件，可以更加优化。而且你可以把压缩率提高点，这样带宽消耗会更小

即前端打包自身开启gzip压缩gz文件，nginx再开启gzip检测，则双重保障。

2、deceleration基础属性是决定BScroll滑动减速度的核心。
值越小，滑动越远，它是减速度。

deceleration: 0.0015 滚动动量减速越大越快，建议不大于0.01

3、任何请求，如果和动画同步运行就会卡顿
ajax，图片等都是异步请求，但如果和transition或animation动画一同执行，尤其是还没加载完全请求。就会大大增加卡顿程度。目前本人的优化方案就是待图片图片加载完全，（ajax肯定于图片加载之前已完成），再弹出窗口。

4、移动端分辨率pt和px区别
pt: 逻辑分辨率，（视觉单位，只能屏幕尺寸有关系）
px: 物理分辨率，（像素点构成，多少个点构成一个逻辑长度），屏幕实际拥有的像素点。
即 1个pt对于几个px，即每1个长度单位的逻辑像素，能包含几个物理像素点。
或者1个逻辑像素由几个物理像素构成
ppi:像素密度，每英寸所拥有的像素数量屏幕对角线逻辑pt像素/对角线的屏幕英寸，如520pt/3.5寸
注：人眼能分辨的极限就是1pt=2px 。

Web开发环境下设备的物理像素是1px，是独立于web的物理像素，但是投入生产后，iphone手机屏幕的1pt个物理像素可能是2px 3px 4px甚至更高，所以，会将边框扩大倍数。
需要在
4.1、微信开发者工具下的px默认是逻辑像素即（开发模式px即pt），而web端px是物理像素。因为web的像素点是统一标准的。