问题：用express art-template渲染出来的页面源码有空格，如下图 <a target="_blank" rel="

也遇到了这个问题，已解决 <div class="highlight highlight-source-js notranslate position-relati

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

mingkong2023 commented on May 27, 2024

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

from art-template.

Comments (3)

704585069 commented on May 27, 2024

这里是付剑伟您的来信已收到我会尽快给您回复

from art-template.

VxRain commented on May 27, 2024

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

// 确保 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