wxa.js 开启极致压缩

在之前的小程序性能优化系列中,我给出了如何分析文件大小和压缩图片的方式。但在一个项目中,如果我们已经完成了相关的文件压缩以后,还有没有办法进一步压缩呢?

答案是有的,你除了可以压缩图片以外,还可以选择压缩项目中的代码。

而这些部分,你可以借助一些工具来完成代码的压缩,其中包括:

  • uglifyjs: 压缩项目 JS 代码
  • html-minifier: 压缩项目 WXML 代码

在一个普通的小程序项目中,你需要自行编辑相关的依赖。而如果你使用的是 wxa.js,则可以使用官方提供的插件,十分简单的在你的项目中加入相关特性。

如何使用?

wxa.js官方提供了两个插件 @wxa/plugin-uglifyjs@wxa/plugin-minify-wxml, 只需要安装相关的插件,并在配置文件中引入,既可以在构建时加入代码压缩。

同时,为了方便,我们可以仅在进行生产环境构建的时候,从而实现开发的时候可以方便调试。

配置方法

首先,执行命令安装插件

npm i -D @wxa/plugin-minify-wxml
npm i -D @wxa/plugin-uglifyjs
Code language: CSS (css)

其次,在 wxa.config.js 中添加配置项目

const UglifyjsPlugin = require('@wxa/plugin-uglifyjs');
const MinifyWxmlPlugin = require('@wxa/plugin-minify-wxml');
const prod = process.env.NODE_ENV === 'production';
// 其他配置代码
if (prod) {
    module.exports.plugins.push(new UglifyjsPlugin());
    module.exports.plugins.push(new MinifyWxmlPlugin());
}
Code language: JavaScript (javascript)

这样,就可以限制在仅在编译生产环境代码时,对代码执行压缩。缩小项目体积。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注