Nodejs 一个自动压缩css & js的express中间件

Nodejs 一个自动压缩css & js的express中间件

假期闲着写了这个东西，新手学js请多多包涵 ^_^

简单来说它就是一个自动uglify你的js & css的工具

  • 支持 js & css压缩 (js使用uglifyjs，css使用yuicompressor)
  • 支持压缩缓存 (内存或文件)
  • 支持对任意内容进行压缩 不仅限于static
  • 可以和gzip等共存

它一定还有不少问题，期待大家踊跃fork & push :)

express-minify


6 回复

Nodejs 一个自动压缩css & js的express中间件

简介

假期闲着写了这个东西，新手学js请多多包涵 ^_^

简单来说它就是一个自动 uglify 你的js & css 的工具。它可以帮你自动压缩你的静态资源，从而提高网站加载速度。

特点

  • 支持 js & css 压缩：使用 uglifyjs 来压缩 JavaScript 文件，使用 yuicompressor 来压缩 CSS 文件。
  • 支持压缩缓存：可以选择将压缩后的文件存储在内存中或者保存到文件系统中，以减少重复压缩的时间。
  • 支持对任意内容进行压缩：不仅限于静态资源，你还可以对动态生成的内容进行压缩。
  • 可以和 gzip 共存：压缩后的文件可以与 gzip 等其他压缩方式一起使用，进一步提升性能。

使用方法

首先，你需要安装 express-minify 包：

npm install express-minify --save

然后，在你的 Express 应用程序中配置 express-minify 中间件：

const express = require('express');
const minify = require('express-minify');

const app = express();

// 配置minify中间件
app.use(minify({
    // 可选配置
    htmlMinifier: {
        removeComments: true,
        collapseWhitespace: true
    },
    jsMatch: /\.js$/,
    cssMatch: /\.css$/,
    cache: 'memory', // 或者 'file'，指定缓存类型
    uglifyJS: {}, // 传递给 UglifyJS 的选项
    yuicompressor: {} // 传递给 YUICompressor 的选项
}));

// 静态资源路径
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

示例代码解释

  1. 安装 express-minify：

    npm install express-minify --save

  2. 配置 express-minify 中间件：

    • htmlMinifier: 配置 HTML 压缩选项。
    • jsMatch 和 cssMatch: 指定哪些文件需要被压缩。
    • cache: 指定缓存类型，可以是 'memory' 或 'file'。
    • uglifyJS 和 yuicompressor: 分别传递给 UglifyJS 和 YUICompressor 的选项。

  3. 静态资源路径：

    app.use(express.static('public'));

    这里假设你的静态资源（如 .js 和 .css 文件）位于 public 目录下。

  4. 启动服务器：

    app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

结语

这个中间件一定还有不少问题，期待大家踊跃 fork 并提出改进建议 :)

参考链接

希望这个介绍对你有帮助！


怎么调用

其实都不需要了，用grunt就可以了~

没需求 没有人会在请求中去压 都是压好放那儿吧

其实真心grunt就够了

这个问题讨论的是如何实现一个自动压缩CSS和JS的Express中间件。我们可以基于express-minify库来完成这个功能。以下是如何安装并使用这个库的步骤，以及一些基本的示例代码。

安装 express-minify

首先，你需要在项目中安装 express-minify：

npm install express-minify --save

使用 express-minify

然后，在你的Express应用中引入并配置这个中间件。以下是一个简单的示例代码：

const express = require('express');
const minify = require('express-minify');

const app = express();

// 配置minify中间件
app.use(minify({
    cache: false, // 是否启用内存缓存，默认为true
    htmlMaxAge: 365 * 24 * 60 * 60 * 1000, // HTML文件的最大缓存时间（毫秒）
    jsMatch: /\/js\/.*\.js$/, // 匹配需要压缩的JS文件
    cssMatch: /\/css\/.*\.css$/ // 匹配需要压缩的CSS文件
}));

app.use(express.static(__dirname + '/public'));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个示例中：

  • 我们配置了 express-minify 中间件来处理JS和CSS文件。
  • cache 设置为 false 表示不使用内存缓存。
  • htmlMaxAge 设置了HTML文件的最大缓存时间为一年。
  • jsMatch 和 cssMatch 分别定义了哪些路径下的JS和CSS文件需要被压缩。

通过上述配置，当用户请求JS和CSS文件时，express-minify 将会自动压缩这些文件，并将它们发送给客户端。此外，这个中间件还可以与其他如Gzip压缩一起使用，以进一步减少传输的数据量。

这样就实现了一个简单的自动压缩JS和CSS文件的功能。你可以根据自己的需求调整配置选项，比如设置不同的缓存策略、匹配更复杂的文件路径等。

回到顶部