uni-app中使用gzip减小打包体积

最新推荐文章于 2025-02-15 00:25:56 发布

原创最新推荐文章于 2025-02-15 00:25:56 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #uni-app

uni-app 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在uni-app中如何通过创建vue.config.js，配置gzip并利用compression-webpack-plugin插件来减小打包体积。详细步骤包括创建配置文件、下载所需依赖、打包及服务器配置，并提供了检查gzip是否开启的方法。

uni-app中使用gzip减小打包体积

话不多说下面开始

1.创建vue.config.js

因为uni是根据vue开发的所以支持vue.config.js
在根目录创建空的文件改名为 vue.config.js

2.填写文件内容

打开vue.config.js 将代码粘贴（这段代码是配置gzip的）

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack:{
	  plugins:[
		new CompressionWebpackPlugin(
			{
				filename: "[path][base].gz",
				algorithm: "gzip",
				test: /\.js$/,
				threshold: 10240,
				minRatio: 0.8,
				exclude: /node_modules/,
			}
		)
	  ]
  }
}

3.下载webpack

注意指定版本 webpack: 4.46.0
因为我只有这个项目用到webpack所以会局部安装
打开cmd 或者 powershell 或者终端都可以输入局部安装的指令

指令：npm install webpack@4.46.0 --save-dev

4.下载 compression-webpack-plugin 插件

注意指定版本 compression-webpack-plugin: 6.1.1
一样的局部安装

指令：npm install compression-webpack-plugin@6.1.1 --save-dev

5.打包

安装完成之后就可以使用hbuilderx来进行打包了。

就可以看到gz文件了。

6.在服务器上配置开启zgip

这里根据自己的服务器类型去设定，不详细说了。

7.检查是否开启成功gzip压缩

1、谷歌浏览器 F12

2、在表头单击鼠标右键

å¨è¿éæå¥å¾çæè¿°

3、如果开启了gzip则显示gzip，没有则是空

å¨è¿éæå¥å¾çæè¿°

// http://tool.chinaz.com/Gzips/ 在此网站也能查到是否开启了Gzip压缩

å¨è¿éæå¥å¾çæè¿°