[Bug]: The html content inserted using the ejs variable in iframe.html is not minify

Describe the bug

The html content inserted using the ejs variable in iframe.html is not minify

template file: node_modules/@storybook/builder-webpack5/templates/preview.ejs

unminify variable: bodyHtmlSnippet, headHtmlSnippet

The html file itself is indeed compressed, but the variables are not

Reproduction link

https://github.com/storybookjs/sandboxes/tree/next/react-webpack/18-ts/after-storybook

Reproduction steps

npm run build-storybook
check ./storybook-static/iframe.html and ./storybook-static/index.html

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    Yarn: 2.4.3 - ~/.nvm/versions/node/v20.14.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.2.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-essentials: ~8.1.1 => 8.1.11 
    @storybook/addon-interactions: ~8.1.1 => 8.1.11 
    @storybook/addon-links: ~8.1.1 => 8.1.11 
    @storybook/addon-storysource: ~8.1.1 => 8.1.1 
    @storybook/addon-viewport: ~8.1.1 => 8.1.11 
    @storybook/addon-webpack5-compiler-swc: ^1.0.4 => 1.0.4 
    @storybook/blocks: ~8.1.1 => 8.1.11 
    @storybook/manager-api: ~8.1.1 => 8.1.1 
    @storybook/react: ~8.1.1 => 8.1.11 
    @storybook/react-webpack5: ~8.1.11 => 8.1.11 
    @storybook/test: ~8.1.1 => 8.1.11 
    @storybook/theming: ~8.1.1 => 8.1.1 
    @storybook/types: ~8.1.1 => 8.1.11 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ~8.1.1 => 8.1.11

Additional context

No response

Disclaimer This information might be inaccurate, due to it being generated automatically To minify the HTML content inserted using the EJS variable in iframe.html, follow these steps:

Locate the EJS Template: The EJS template for iframe.html is located in /code/builders/builder-webpack5/templates/iframe.html.ejs.
Install HTML Minifier: Ensure html-minifier-terser is installed as a dependency.
```
npm install html-minifier-terser --save-dev
```

Modify Webpack Configuration: Update the Webpack configuration to include the HTML minifier plugin. Edit /code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts to include the following:

import HtmlWebpackPlugin from 'html-webpack-plugin';
import { minify } from 'html-minifier-terser';

// Inside the Webpack configuration object
plugins: [
 new HtmlWebpackPlugin({
   template: path.resolve(__dirname, '../templates/iframe.html.ejs'),
   minify: {
     collapseWhitespace: true,
     removeComments: true,
     removeRedundantAttributes: true,
     useShortDoctype: true,
     removeEmptyAttributes: true,
     removeStyleLinkTypeAttributes: true,
     keepClosingSlash: true,
     minifyJS: true,
     minifyCSS: true,
     minifyURLs: true,
   },
 }),
],

Rebuild Storybook: Run npm run build-storybook to apply the changes.

References

/.github/DISCUSSION_TEMPLATE/help.yml /code/builders/builder-webpack5 /.github/comments/invalid-link.md /.github/DISCUSSION_TEMPLATE/ideas.yml /code/core/src/server-errors.ts /code/frameworks/html-webpack5 /code/builders/builder-webpack5/templates /.github/DISCUSSION_TEMPLATE/rfc.yml /.github/comments /code/builders/builder-vite/input /code/builders/builder-webpack5/src/preview /test-storybooks/ember-cli/ember-output/storybook-docgen /code/lib/cli/src/automigrate/fixes/new-frameworks.ts /code/frameworks/angular/src/builders/build-storybook/schema.json /code/lib/codemod/src/transforms/testfixtures/csf-hoist-story-annotations/variable.output.snapshot /code/addons/docs/ember /CONTRIBUTING.md /docs/_snippets/test-runner-with-index-json.md /code/core/src/manager/components/preview/Iframe.stories.tsx /test-storybooks/ember-cli/ember-output /docs/get-started/frameworks/react-vite.mdx /docs/configure/webpack.mdx /docs/_snippets/custom-build-script-production.md /code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts /code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

storybookjs / storybook