Melhor modo para compactar e distribuir um site

[ThePokyWizard]

Há muitos anos atrás com a moda do Yeoman haviam vários "generators" que usavam muitos módulos NPM + Grunt.js + bower para testar localmente e distribuir o site, criando os arquivos únicos de JS, CSS, compactando os arquivos do site (HTML, CSS, JS e imagens).
Era bem fácil manter o site atualizado, alterar e gerar uma versão compacta do site para colocar em produção.

Hoje muitos desses módulos estão depreciados ou usam dependências com vulnerabilidades e não sofrem atualizações há anos.

Qual o melhor modo hoje em dia para realizar esse trabalho?

• Criar vários arquivos concatenados e minificados de JS
• Criar vários arquivos concatenados e minificados de CSS
• Minificar HTML
• Minificar imagens
• Substituir nome de arquivos JS, CSS e imagens com nomes novos para evitar cache

[ninetails]

Webpack e Rollup continuam sendo mantidos, creio que ainda são os mais recomendáveis. Para em específico todos os pontos, iria de webpack, mas continua sendo meio chato para configurar, sendo o segundo mais voltado a libs js.

Saindo do convencional, tem o Parcel que a filosofia é zero configuration e um cara que só cito porém desaconselharia utilizar mas vale dar uma olhada é o Snowpack.

[ThePokyWizard]

@ninetails Realmente, o webpack pelo que li ano passado se mostrou bem chato, tendo que alterar várias coisas, principalmente por um projeto antigo ainda ser em AngularJS.
Mas vou dar uma olhada no Parcel.

Obrigado pelas dicas.

[kazzkiq]

Eu uso o Rollup para projetos e sites (além de libs) e recomendaria tranquilamente.

É muito mais simples de configurar do que o Webpack, tem uma boa comunidade, e é mantido ativamente.

Sobre seus pontos, seguem algumas soluções com Rollup:

Criar vários arquivos concatenados e minificados de JS

rollup-plugin-terser

Criar vários arquivos concatenados e minificados de CSS

Aqui depende da sua preferência. Se usar SASS:
rollup-plugin-sass

PostCSS:
rollup-plugin-postcss

Se for usar CSS "puro", recomendo PostCSS com os plugins autoprefixer e postcss-import, pelo menos.

• autoprefixer: Adiciona prefixos -webkit-, -moz-, etc, no seu CSS automaticamente.
• postcss-import: Te permite importar arquivos CSS (sem SASS) que ao invés de serem tratados como um import normal do CSS, são executados na hora do build. Ou seja, você pode continuar tendo um código bem organizado com vários arquivos CSS separados, com o benefício de um só arquivo gerado no build.

Minificar HTML

Pesquisei e vi que existem plugins, mas nunca usei nenhum deles, então não arrisco recomendar nenhum.

Minificar imagens

Mesma coisa do HTML. Pesquisei e vi que existe pelo menos um plugin que faz isso, mas eu particularmente sempre minifiquei as imagens "na mão" usando Photoshop e o ImageOptim, então não arrisco indicar nenhum.

Substituir nome de arquivos JS, CSS e imagens com nomes novos para evitar cache

Você pode usar o @rollup/plugin-replace mandando ele substituir uma palavra por um número aleatório sempre que gerar um build. Exemplo:

<!-- no seu html -->
<script src="meu/bundle.js?BUILD_RANDOM"></script>

// no seu rollup.config.js
import replace from '@rollup/plugin-replace';
 
export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'iife'
  },
  plugins: [
    replace({'BUILD_RANDOM': Math.random().toString().substr(2) })
  ]
};

Resultado do build:

<script src="meu/bundle.js?15379226347141584"></script>

[eliseumds]

NextJS?

[ThePokyWizard]

O meu principal problema com os métodos modernos é o conceito que eles usam para carregar arquivos JS de terceiros, que eu não consigo entender.

Antigamente (em torno de 2008 - 2012) usava algo simples como:

<!-- terceiros -->
<script src="jquery.js">
<script src="bootstrap.js">
<script src="froala.js">

<!-- proprios -->
<script src="funcoes.js">
<script src="controllers.js">

E quando migrei para o Grunt + Yeoman com Wiredep (2013+) tudo seguia a mesma lógica, apenas o melhorava é que tudo era incorporado em bundles, dessa forma caso algo desse errado era fácil saber o que havia disparado erro e colocava na ordem correta os scripts para serem carregados.

<!-- build:js(.) scripts/vendor.js -->
        <script src="bower_components/jquery/dist/jquery.js"></script>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/json3/lib/json3.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/main.js -->
        <script src="assets/functions.js"></script>
        <script src="assets/app.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/mc.js -->
        <script src="assets/controllers/city.js"></script>
        <script src="assets/services/city.js"></script>
<!-- endbuild -->