Open eric-gitta-moore opened 1 month ago
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.
/.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
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
Reproduction link
https://github.com/storybookjs/sandboxes/tree/next/react-webpack/18-ts/after-storybook
Reproduction steps
npm run build-storybook
./storybook-static/iframe.html
and./storybook-static/index.html
System
Additional context
No response