# wxa.js 开启极致压缩

- Link: https://www.ixiqin.com/2021/01/29/open-extreme-compression-wxa-js/
- Published: 2021-01-29T00:51:16+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2021/01/29/open-extreme-compression-wxa-js/#)

 * [如何使用？](https://www.ixiqin.com/2021/01/29/open-extreme-compression-wxa-js/#%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8%ef%bc%9f)
 * [配置方法](https://www.ixiqin.com/2021/01/29/open-extreme-compression-wxa-js/#%e9%85%8d%e7%bd%ae%e6%96%b9%e6%b3%95)

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

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

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

 * uglifyjs： 压缩项目 JS 代码
 * html-minifier： 压缩项目 WXML 代码

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

## 如何使用？

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

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

## 配置方法

首先，执行命令安装插件

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

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

    ```javascript
    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)
    ```

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