fontmin webpack

Fontmin-Webpack

Rédifie les polices d'icônes à ce qui est utilisé.

 # for webpack 5
npm install --save-dev fontmin-webpack
# for webpack 4
npm install --save-dev fontmin-webpack@^2.0.1
# for webpack <=3
npm install --save-dev fontmin-webpack@^1.0.2

Comment ça marche

• Examine vos actifs de sortie WebPack pour identifier les formats de police qui ont le même nom
• Identifie les règles CSS qui spécifient une propriété de contenu et extrait les caractères Unicode
• Utilise fontmin pour réduire la police TrueType aux glyphes utilisés uniquement
• Convertit le TTF à tous les autres formats (prend en charge ttf , eot , svg , woff et woff2 bien que vous ne deviez vraiment avoir besoin que de Woff)
• Remplace l'actif de sortie Webpack par la version minifiée

Usage

Installer Fontmin-webpack

npm install --save-dev fontmin-webpack

Incluez votre police d'icône

L'exemple ci-dessous utilise les glyphes uf0c7 et uf0ce

 @font-face {
  font-family : 'FontAwesome' ;
  src : url ( 'fontawesome-webfont.eot' ) format ( 'embedded-opentype' ) , url ( 'fontawesome-webfont.woff2' )
      format ( 'woff2' ) , url ( 'fontawesome-webfont.woff' ) format ( 'woff' ) , url ( 'fontawesome-webfont.ttf' )
      format ( 'ttf' );
}

/**
 * Remove other unused icons from the file.
 */
. fa-save : before ,
. fa-floppy-o : before {
  content : 'f0c7' ;
}
. fa-table : before {
  content : 'f0ce' ;
}

Configurez votre configuration Webpack

 const FontminPlugin = require ( 'fontmin-webpack' )

module . exports = {
  entry : 'my-entry.js' ,
  output : {
    // ...
  } ,
  plugins : [
    // ...
    new FontminPlugin ( {
      autodetect : true , // automatically pull unicode characters from CSS
      glyphs : [ 'uf0c8' /* extra glyphs to include */ ] ,
      // note: these settings are mutually exclusive and allowedFilesRegex has priority over skippedFilesRegex
      allowedFilesRegex : null , // RegExp to only target specific fonts by their names
      skippedFilesRegex : null , // RegExp to skip specific fonts by their names
      textRegex : / .(js|css|html)$ / ,  // RegExp for searching text reference
      webpackCompilationHook : 'thisCompilation' , // Webpack compilation hook (for example PurgeCss webpack plugin use 'compilation' )
    } ) ,
  ] ,
} 

Utiliser dans Vue3

Dans un projet VUE3, Purgecss doit être exécuté en tant que plugin WebPack. La façon la plus simple d'ajouter des plugins WebPack est de les déclarer dans vue.config.js

Ceci est un échantillon pour un projet avec Vue3 / Tailwindcss 3 / Fontawesome 6

vue.config.js

 const webpackPlugins = [ ] ;
const __DEBUG__ = '0' ; //turn to 1 for avoiding purgecss and fontmin

// **********************************
// Purgecss unused classes
//
if ( __DEBUG__ !== '1' ) {
  const PurgecssPlugin = require ( 'purgecss-webpack-plugin' ) ;
  const glob = require ( 'glob-all' )
  const purgeCssPlugin = new PurgecssPlugin ( {
    paths : glob . sync (
      [
        path . join ( __dirname , './public/*.html' ) ,
        path . join ( __dirname , './src/**/*.vue' ) ,
        path . join ( __dirname , './src/**/*.js' )
      ] ) ,
    safelist : [ / ^sm: / , / ^md: / , / ^lg: / , / ^xl: / , / ^2xl: / , / ^focus: / , / ^hover: / , / ^group-hover: / , / [.*] / , / ^basicLightbox / , / /[0-9] / , / ^tns / ] ,
    fontFace : true
  } )
  webpackPlugins . push ( purgeCssPlugin ) ;
}

// **********************************
// fontminifying Fontawesome
//
if ( __DEBUG__ !== '1' ) {
  const FontMinPlugin = require ( 'fontmin-webpack' ) ;
  const fontMinPlugin = new FontMinPlugin ( {
    autodetect : true ,
    glyphs : [ ] ,
    allowedFilesRegex : / ^fa[srltdb]*- / , // RegExp to only target specific fonts by their names
    skippedFilesRegex : null , // RegExp to skip specific fonts by their names
    textRegex : / .(js|css|html|vue)$ / ,  // RegExp for searching text reference
    webpackCompilationHook : 'compilation' , // Webpack compilation hook (for example PurgeCss webpack plugin use 'compilation' )
  } ) ;
  webpackPlugins . push ( fontMinPlugin ) ;
}

module . exports = {
   runtimeCompiler : true ,
   configureWebpack : {
    plugins : webpackPlugins ,
    devtool : false ,
    mode : 'production' ,
  } ,
} ;

De toute évidence, les dépendances requises doivent être ajoutées dans package.json

package.json

 "devDependencies" : {
…
    "fontmin-webpack" : " ^4.0.0 " ,
    "glob-all" : " ^3.3.0 " ,
    "purgecss-webpack-plugin" : " ^4.1.3 " ,
    "webpack" : " ^5.71.0 " ,
…
}

Enregistrer les octets

Avant

 674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]
912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  [big]
b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]
fee66e712a8a08eef5805a46892932ad.woff     98 kB          [emitted]

Après

 674f50d287a8c48dc19ba404d20fe713.eot    2.82 kB          [emitted]
912ec66d7572ff821749319396470bde.svg    2.88 kB          [emitted]
b06871f281fee6b241d60582ae9369b9.ttf    2.64 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2  1.01 kB          [emitted]
fee66e712a8a08eef5805a46892932ad.woff   2.72 kB          [emitted]

Limites

• Les polices doivent être chargées de file-loader
• Les polices doivent avoir le même nom que la version TrueType de la police.
• Les noms de fichiers de police ne sont pas modifiés par différents ensembles de glyphes utilisés (voir # 8)