search

webdiscus / pug-plugin

Renders Pug template to HTML or template function. Resolves source files of scripts, styles, images in Pug . Uses Pug template as entry point.
https://webdiscus.github.io/pug-plugin/hello-world
ISC License
73 stars 8 forks source link

[FEATURE REQUEST] Preload support for font image audio video #69

Closed webdiscus closed 8 months ago

webdiscus commented 1 year ago

Here is the modified FR #60.

Automatically preload assets resolved in HTML or in CSS:

For example, there is the style used a font:

style.css

@font-face {
  font-family: "Fira Sans";
  src:  url('fonts/fira/FiraSans-Regular.woff2') format('woff2');
}

The generated HTML:

<html>
<head>
  <title>Demo</title>

  <!-- injected preloads -->
  <link rel="preload" href="css/style.1f4faaff.css" as="style">
  <link rel="preload" href="js/main.c608b1cd.js" as="script">  
  <link rel="preload" href="fonts/fira/FiraSans-Regular.woff2" as="font" type="font/woff2" />
  <link rel="preload" href="assets/img/imac.3666c92d.svg" as="image" type="image/svg+xml">

  <!-- load style -->   
  <link href="style.1f4faaff.css" rel="stylesheet" />
</head>
<body>
  <img src="assets/img/apple.3666c92d.svg" alt="apple">
  ...
  <!-- load script -->
  <script src="js/main.c608b1cd.js"></script>
</body>
</html>

The auto generated preload link tag should be injected before a first style or script tag in head.

The option name should be preload:

{
  preload: [
    {
      test: /\.(s?css|less)$/,
      as: 'style',
    },
    {
      test: /\.(js|ts)$/,
      as: 'script',
    },
    {
      test: /[\\/]fonts[\\/].+(eot|ttf|woff|woff2)$/,
      as: 'font',
      // the `type` attribute will be added automatically : 'font/woff2',  'font/ttf', etc.
      // additional optional attributes 
      attributes: { crossorigin: true },
    },
    {
      test: /[\\/]images[\\/].+(svg|png|jpg)$/,
      as: 'image',
      // the `type` attribute will be added automatically : 'image/svg+xml',  'image/png', etc.
    },
  ],
}
ladown commented 1 year ago

Seems to be good.

Going back to our last conversation about preload, do you think it might still be worth thinking about how scripts/styles could be captured through these settings? I thought about it to make the code more uniform. It looks strange when we specify preload for styles or scripts manually, and the plugin handles all our other assets

webdiscus commented 1 year ago

@ladown

The plugin does not capture scripts/styles, because they already must be manually specified in a template and not anywhere. This is the goal this plugin: manually specify source scripts/styles directly in a template. This plugin don't inject the link/script tags.

P.S. You are probably confusing with another html-webpack-plugin that catches styles/scripts defined in Webpack config and then inserts them into HTML.

webdiscus commented 1 year ago

Preloading of scripts and styles will also be implemented too.

webdiscus commented 8 months ago

@ladown

the new pug plugin v5.0.0 is based on the html-bundler-webpack-plugin and has all features, including the preload