aui/art-template

用express art-template渲染出来的页面源码有空格

mingkong2023 opened this issue · 3 comments

mingkong2023 commented

问题：用express art-template渲染出来的页面源码有空格，如下图

image

通过压缩等各种配置均不生效：

const htmlMinifier = require("html-minifier");
  //配置模板引擎
  app.set("view options", {
    debug: process.env.NODE_ENV !== "prd",
    cache: process.env.NODE_ENV == "prd",
    minimize: true,
   // HTML 压缩器。仅在 NodeJS 环境下有效
   htmlMinifier: htmlMinifier,

   // HTML 压缩器配置。参见 https://github.com/kangax/html-minifier
    htmlMinifierOptions: {
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true,
      includeAutoGeneratedTags: true,
        removeAttributeQuotes: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        sortClassName: true,
        useShortDoctype: true,
        collapseWhitespace: true,
      // 运行时自动合并：rules.map(rule => rule.test)
      ignoreCustomFragments: [],
    },
  });
  app.set("view engine", "html");
  app.set("views", setPath(appRoot, "view"));
  app.engine(".html", require("express-art-template"));
704585069 commented
VxRain commented

也遇到了这个问题，已解决

// 确保 NODE_ENV 为 production
// Ensure that NODE_ENV is set to production,
process.env.NODE_ENV = "production";
const artTemplate = require("art-template");
const htmlMinifier = require("html-minifier");

const htmlString = `
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{title}}!</title>
    <style>
      body {
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        color: #333;
      }
    </style>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">{{ message }}</h1>
        <p class="subtitle">My first website with <strong>Art-Template</strong>!</p>
        <p class="subtitle">{{ now }}</p>
      </div>
    </section>
  </body>
</html>
`;
const data = {
  title: "Hello, World",
  message: "你好，世界",
  now: +new Date(),
};

// 默认配置即可启用压缩(NODE_ENV === "production")
// By default, the compression is enabled(NODE_ENV === "production")
const options1 = {};

const res1 = artTemplate.render(htmlString, data, options1);
console.log(`Res1: ${res1}`);

const options2 = {
  debug: false,
  // 不要这样，因为art-template内部对htmlMinifier做了处理
  // Do not do this, because art-template internally processes htmlMinifier
  htmlMinifier: htmlMinifier.minify,
};
const res2 = artTemplate.render(htmlString, data, options2);
console.log(`Res2: ${res2}`); // 不会被压缩 (It will not be compressed)

// 如果确实需要自定义压缩器，这样整
// If you really need to customize the compression, do this
const options3 = {
  htmlMinifier: htmlMinifier.minify,
  collapseWhitespace: true,
  minifyCSS: true,
  minifyJS: true,
  ignoreCustomFragments: [],
};

const res3 = artTemplate.render(htmlString, data, options3);
console.log(`Res3: ${res3}`); // ✔

// 具体原因看源码，也许后面会写出来分享到博客，咕咕咕咕咕
// For more details, see the source code, which may be shared to the blog
704585069 commented