Publique, envie e instale o JavaScript moderno para aplicativos mais rápidos

Melhore a performance ativando as dependências e saídas modernas do JavaScript.

Jason Miller
Houssein Djirdeh

Mais de 90% dos navegadores são capazes de executar JavaScript moderno, mas a prevalência do JavaScript legado continua sendo uma grande fonte de problemas de desempenho na Web atualmente.

JavaScript moderno

O JavaScript moderno não é caracterizado como código escrito em uma versão específica da especificação ECMAScript, mas sim em uma sintaxe com suporte de todos os navegadores modernos. Os navegadores da Web modernos, como Chrome, Edge, Firefox e Safari, representam mais de 90% do mercado de navegadores, e diferentes navegadores que dependem dos mesmos mecanismos de renderização representam mais 5%. Isso significa que 95% do tráfego global da Web vem de navegadores compatíveis com os recursos de linguagem JavaScript mais usados nos últimos 10 anos, incluindo:

  • Classes (ES2015)
  • Funções de seta (ES2015)
  • Geradores (ES2015)
  • Escopo de bloco (ES2015)
  • Desestruturação (ES2015)
  • Parâmetros de descanso e propagação (ES2015)
  • Abreviação de objetos (ES2015)
  • Async/await (ES2017)

Os recursos nas versões mais recentes da especificação de linguagem geralmente têm suporte menos consistente nos navegadores modernos. Por exemplo, muitos recursos do ES2020 e ES2021 têm suporte apenas em 70% do mercado de navegadores, ou seja, ainda são a maioria dos navegadores, mas não o suficiente para que seja seguro confiar nesses recursos diretamente. Isso significa que, embora o JavaScript "moderno" seja um alvo em movimento, o ES2017 tem a maior variedade de compatibilidade de navegador e inclui a maioria dos recursos de sintaxe modernos mais usados. Em outras palavras, o ES2017 é o mais próximo da sintaxe moderna.

JavaScript legado

O JavaScript legado é um código que evita especificamente o uso de todos os recursos de linguagem acima. A maioria dos desenvolvedores escreve o código-fonte usando a sintaxe moderna, mas compila tudo para a sintaxe legada para aumentar o suporte ao navegador. A compilação para a sintaxe legada aumenta o suporte ao navegador, mas o efeito é geralmente menor do que imaginamos. Em muitos casos, o suporte aumenta de cerca de 95% para 98%, gerando um custo significativo:

  • O JavaScript legado geralmente é cerca de 20% maior e mais lento do que o código moderno equivalente. As deficiências de ferramentas e a configuração incorreta geralmente ampliam ainda mais essa lacuna.

  • As bibliotecas instaladas representam até 90% do código JavaScript de produção típico. O código da biblioteca tem um overhead de JavaScript legado ainda maior devido à duplicação de polyfill e auxiliar que poderia ser evitada com a publicação de um código moderno.

JavaScript moderno no npm

Recentemente, o Node.js padronizou um campo "exports" para definir pontos de entrada de um pacote:

{
  "exports": "./index.js"
}

Os módulos referenciados pelo campo "exports" implicam uma versão do Node de pelo menos 12.8, que oferece suporte ao ES2019. Isso significa que qualquer módulo referenciado usando o campo "exports" pode ser gravado em JavaScript moderno. Os consumidores de pacotes precisam supor que os módulos com um campo "exports" contêm código moderno e transpilam, se necessário.

Somente moderno

Se você quiser publicar um pacote com código moderno e deixar que o consumidor processe a transpilação quando ele for usado como uma dependência, use apenas o campo "exports".

{
  "name": "foo",
  "exports": "./modern.js"
}

Moderno com fallback legado

Use o campo "exports" com "main" para publicar seu pacote usando código moderno, mas também inclua uma substituição do ES5 + CommonJS para navegadores legados.

{
  "name": "foo",
  "exports": "./modern.js",
  "main": "./legacy.cjs"
}

Moderno com otimizações de fallback legada e bundler ESM

Além de definir um ponto de entrada CommonJS substituto, o campo "module" pode ser usado para apontar para um pacote substituto legado semelhante, mas que usa a sintaxe do módulo JavaScript (import e export).

{
  "name": "foo",
  "exports": "./modern.js",
  "main": "./legacy.cjs",
  "module": "./module.js"
}

Muitos bundlers, como o webpack e o Rollup, dependem desse campo para aproveitar os recursos do módulo e ativar o tree shaking. Esse ainda é um pacote legado que não contém nenhum código moderno além da sintaxe import/export. Portanto, use essa abordagem para enviar códigos modernos com um substituto legado ainda otimizado para agrupamento.

JavaScript moderno em aplicativos

As dependências de terceiros compõem a grande maioria do código JavaScript de produção típico em aplicativos da Web. Embora as dependências do npm tenham sido publicadas como sintaxe legada do ES5, isso não é mais uma suposição segura e pode fazer com que as atualizações de dependências interrompam o suporte do navegador no seu aplicativo.

Com um número cada vez maior de pacotes npm migrando para o JavaScript moderno, é importante garantir que as ferramentas de build estejam configuradas para processá-los. Há uma boa chance de que alguns dos pacotes do npm de que você depende já estejam usando recursos de linguagem modernos. Há várias opções disponíveis para usar o código moderno do npm sem interromper o aplicativo em navegadores mais antigos, mas a ideia geral é fazer com que o sistema de build transpile as dependências para o mesmo destino de sintaxe do código-fonte.

webpack

A partir do webpack 5, agora é possível configurar qual sintaxe o webpack vai usar ao gerar código para pacotes e módulos. Isso não transpila seu código ou dependências, apenas afeta o código "glue" gerado pelo webpack. Para especificar o destino de suporte ao navegador, adicione uma configuração de browserslist ao projeto ou faça isso diretamente na configuração do webpack:

module.exports = {
  target: ['web', 'es2017'],
};

Também é possível configurar o webpack para gerar pacotes otimizados que omitirão funções de wrapper desnecessárias ao segmentar um ambiente moderno de módulos ES. Isso também configura o webpack para carregar pacotes de divisão de código usando <script type="module">.

module.exports = {
  target: ['web', 'es2017'],
  output: {
    module: true,
  },
  experiments: {
    outputModule: true,
  },
};

Existem vários plug-ins do webpack disponíveis que possibilitam a compilação e o envio de JavaScript moderno, sem deixar de oferecer suporte a navegadores legados, como o plug-in do Optimize e o BabelEsmPlugin.

Plug-in do Optimize

O Optimize Plugin é um plug-in do webpack que transforma o código agrupado final de JavaScript moderno para legado em vez de cada arquivo de origem individual. É uma configuração independente que permite que a configuração do webpack presuma que tudo seja JavaScript moderno sem ramificações especiais para várias saídas ou sintaxes.

Como o plug-in Optimize opera em pacotes em vez de módulos individuais, ele processa o código do aplicativo e as dependências da mesma forma. Isso torna seguro usar dependências JavaScript modernas do npm, porque o código delas será empacotado e transpilado para a sintaxe correta. Ele também pode ser mais rápido do que soluções tradicionais que envolvem duas etapas de compilação e, ao mesmo tempo, gerar pacotes separados para navegadores modernos e legados. Os dois conjuntos de pacotes são projetados para serem carregados usando o padrão module/nomodule.

// webpack.config.js
const OptimizePlugin = require('optimize-plugin');

module.exports = {
  // ...
  plugins: [new OptimizePlugin()],
};

O Optimize Plugin pode ser mais rápido e eficiente do que as configurações personalizadas do webpack, que geralmente agrupam o código moderno e legado separadamente. Ele também processa a execução do Babel para você e minimiza pacotes usando o Terser com configurações ideais separadas para as saídas modernas e legada. Por fim, os polyfills necessários pelos pacotes legados gerados são extraídos em um script dedicado para que nunca sejam duplicados ou carregados desnecessariamente em navegadores mais recentes.

Comparação: transcompilação de módulos de origem duas vezes versus transcompilação de pacotes gerados.

BabelEsmPlugin

O BabelEsmPlugin (link em inglês) é um plug-in de webpack que funciona com o @babel/preset-env (links em inglês) para gerar versões modernas de pacotes existentes e enviar códigos menos transcompilados para navegadores modernos. É a solução pronta mais conhecida para module/nomodule, usada pelo Next.js e pela CLI do Preact.

// webpack.config.js
const BabelEsmPlugin = require('babel-esm-plugin');

module.exports = {
  //...
  module: {
    rules: [
      // your existing babel-loader configuration:
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [new BabelEsmPlugin()],
};

O BabelEsmPlugin oferece suporte a uma ampla variedade de configurações do webpack, porque executa dois builds amplamente separados do aplicativo. A compilação duas vezes pode levar um pouco mais de tempo para aplicativos grandes. No entanto, essa técnica permite que BabelEsmPlugin seja integrado perfeitamente às configurações atuais do webpack e se torne uma das opções mais convenientes disponíveis.

Configurar o babel-loader para transpilar node_modules

Se você estiver usando babel-loader sem um dos dois plug-ins anteriores, será necessário realizar uma etapa importante para consumir módulos npm JavaScript modernos. A definição de duas configurações babel-loader separadas permite compilar automaticamente os recursos de linguagem modernos encontrados em node_modules para ES2017, enquanto ainda transpila seu próprio código proprietário com os plug-ins e predefinições do Babel definidos na configuração do projeto. Isso não gera pacotes modernos e legados para uma configuração de módulo/sem módulo, mas permite instalar e usar pacotes npm que contêm JavaScript moderno sem quebrar navegadores mais antigos.

O webpack-plugin-modern-npm usa essa técnica para compilar dependências de npm que têm um campo "exports" no package.json, já que elas podem conter sintaxe moderna:

// webpack.config.js
const ModernNpmPlugin = require('webpack-plugin-modern-npm');

module.exports = {
  plugins: [
    // auto-transpile modern stuff found in node_modules
    new ModernNpmPlugin(),
  ],
};

Como alternativa, é possível implementar a técnica manualmente na configuração do webpack verificando um campo "exports" no package.json dos módulos conforme eles são resolvidos. Omitindo o armazenamento em cache para encurtar, uma implementação personalizada pode ter esta aparência:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // Transpile for your own first-party code:
      {
        test: /\.js$/i,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      // Transpile modern dependencies:
      {
        test: /\.js$/i,
        include(file) {
          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
          try {
            return dir && !!require(dir[0] + 'package.json').exports;
          } catch (e) {}
        },
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: false,
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

Ao usar essa abordagem, você precisa garantir que a sintaxe moderna seja compatível com seu minificador. Tanto o Terser quanto o uglify-es têm uma opção para especificar {ecma: 2017} a fim de preservar e, em alguns casos, gerar a sintaxe ES2017 durante a compactação e formatação.

Consolidação

O agrupamento tem suporte integrado para gerar vários conjuntos de pacotes como parte de um único build e gera código moderno por padrão. Como resultado, o Rollup pode ser configurado para gerar pacotes modernos e legados com os plug-ins oficiais que você provavelmente já usa.

@rollup/plugin-babel

Se você usar o Rollup, o método getBabelOutputPlugin() (fornecido pelo plug-in oficial do Babel da Rollup) transformará o código em pacotes gerados, em vez de módulos de origem individuais. O agrupamento tem suporte integrado para gerar vários conjuntos de pacotes como parte de um único build, cada um com seus próprios plug-ins. Você pode usar isso para produzir pacotes diferentes para modernos e legados transmitindo cada um por uma configuração diferente do plug-in de saída do Babel:

// rollup.config.js
import {getBabelOutputPlugin} from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: [
    // modern bundles:
    {
      format: 'es',
      plugins: [
        getBabelOutputPlugin({
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {esmodules: true},
                bugfixes: true,
                loose: true,
              },
            ],
          ],
        }),
      ],
    },
    // legacy (ES5) bundles:
    {
      format: 'amd',
      entryFileNames: '[name].legacy.js',
      chunkFileNames: '[name]-[hash].legacy.js',
      plugins: [
        getBabelOutputPlugin({
          presets: ['@babel/preset-env'],
        }),
      ],
    },
  ],
};

Outras ferramentas de build

O Rollup e o webpack são altamente configuráveis, o que geralmente significa que cada projeto precisa atualizar a própria configuração para ativar a sintaxe moderna do JavaScript nas dependências. Há também ferramentas de build de nível mais alto que favorecem a convenção e padrões em vez da configuração, como Parcel, Snowpack, Vite e WMR. A maioria dessas ferramentas assume que as dependências do npm podem conter sintaxe moderna e as transpila para os níveis de sintaxe adequados ao criar para produção.

Além dos plug-ins dedicados para webpack e Rollup, pacotes modernos de JavaScript com substitutos legados podem ser adicionados a qualquer projeto usando a devolução. A devolução é uma ferramenta independente que transforma a saída de um sistema de build para produzir variantes legado do JavaScript, permitindo que o agrupamento e as transformações assumam um destino de saída moderno.