fontmin webpack

Fontmin-webpack

Minifica as fontes de ícones para o que é usado.

 # 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

Como funciona

• Examina seus ativos de saída do WebPack para identificar formatos de fonte que têm o mesmo nome
• Identifica as regras CSS que especificam uma propriedade de conteúdo e extrai caracteres Unicode
• Usa fontmin para minimizar a fonte TrueType apenas para os glifos usados
• Converte o TTF de volta em todos os outros formatos (suporta ttf , eot , svg , woff e woff2 , embora você realmente precise realmente se preocupar com Woff)
• Substitui o ativo de saída do WebPack pela versão minificada

Uso

Instale o Fontmin-Webpack

npm install --save-dev fontmin-webpack

Inclua sua fonte de ícone

O exemplo abaixo usa glifos uf0c7 e 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' ;
}

Configure sua configuração de 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' )
    } ) ,
  ] ,
} 

Use no VUE3

Em um projeto VUE3, o Purgecss precisa ser executado como um plug -in do WebPack. A maneira mais fácil de adicionar plug -ins Webpack é declará -los em vue.config.js

Esta é uma amostra para um projeto com 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' ,
  } ,
} ;

Obviamente, as dependências necessárias devem ser adicionadas no 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 " ,
…
}

Salvar bytes

Antes

 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]

Depois

 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]

Limitações

• As fontes devem ser carregadas com file-loader
• As fontes devem ter o mesmo nome que a versão TrueType da fonte.
• Os nomes dos arquivos de fontes não são alterados por diferentes conjuntos de glifos usados (consulte #8)