13

Estou iniciando com Webpack. Ele compila todos os arquivos javascript e css em um único arquivo Build.js, Bundle.js, o que seja... No fim ele gera um arquivo totalmente minificado utilizando o comando do Node de Production, mas mesmo assim ele gera um arquivo relativamente pesado. Para um projeto grande ( Que é o meu ), pode chegar a 10mb fácil. Carregar 10mb de uma vez é muito ruim.
Como o Webpack controla isso? No que é vantajoso usar ele se ele me tráz um arquivo minificado porém enorme? Ele seleciona os scripts que serão carregados a partir do import?

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
        }
      },
      {
      test: /\.css$/,  
      include: /node_modules/,  
      loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.s(a|c)ss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  resolve: {
    extensions: ['.json', '.min.css', '.min.js', , '.scss' , '.css', '.js' ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins:[
    new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
    })
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}



Obrigado!

5
  • 1
    Na verdade ele faz muito mais que isso. Mas você precisa aprender a controlar o que ele está fazendo, o que leva um tempo. Parece o caso de gerar vários "chunks" de JS separados, e não um único build. O webpack é feito para isso, e consegue saber o que está em cada arquivo js gerado e carregá-los aos poucos conforme necessário. Poste sua configuração do webpack na pergunta que melhoram as chances de você conseguir ajuda no seu caso específico.
    – bfavaretto
    Commented 20/10/2017 às 19:22
  • Obrigado pela resposta! Pelo que deu para ver eu ainda sou beeem leigo em Webpack. Eu fiz algumas alterações à mão conforme necessário. Mas básicamente fiz estas configurações a partir de um CLI do VueJS. Ele no fim me gera um arquivo de umas 20 linhas, mas cada arquivo minificado em apenas uma linha
    – Jackson
    Commented 20/10/2017 às 19:25
  • 1
    Eu pessoalmente acho o webpack complicado, estou usando há um tempo (1 ano, por aí), e tem muita coisa que não sei. Por exemplo, sei que ele faz o que eu disse, mas não sei como fazer no seu código sem reler a documentação. Vamos ver se aparece alguém aqui que saiba responder na lata. Senão em algum momento volto aqui e respondo, porque preciso aprender a fazer isso também :)
    – bfavaretto
    Commented 20/10/2017 às 19:29
  • Oba. Ele é muito bom né, mas fiquei com um pé atrás com isso. Deve ter algum detalhe que devo estar esquecendo rsrs, de qualquer forma, agradeço a ajuda :)
    – Jackson
    Commented 20/10/2017 às 19:31
  • será que isso aqui dá uma luz? hackernoon.com/… essa pergunta no SO em ingles também parece ir na mesma linha stackoverflow.com/questions/31040379/…
    – nunks
    Commented 28/10/2017 às 0:14

1 Resposta 1

1
+100

De fato o Webpack oferece alternativas, o Code Splitting usando plugins, e carregamento por demanda usando import da biblioteca SystemJS, a qual retorna uma Promise.

Mas vejo pelo seu código que está tu está usado o Vue.js. Você pode O Vue.js facilita ainda mais o carregamento por demanda, Veja mais sobre isso: na própria documentação do Vue.js, e nesse artigo. Há vários artigos na internet sobre isso.

Mais opções:

  1. Se a aplicação está na internet ou você tem certeza 100% que o usuário vai ter conexão com a internet. Use CDN onde for possível.

    a) O usuário pode já ter em cache do navegador as mesmas bibliotecas de terceiros que você usa, principalmente bootstrap, jQuery, angular, react...

    b) provavelmente o usuário vai baixar o conteúdo de uma biblioteca no servidor CDN do que no servidor de hospedagem e com o mínimo de latência, diminuido tempos de resposta para download de cada arquivo. Servidores CDN são robustos para garantir largura de banda, latência baixa e disponibilidade.

    c) Aqui eu recomendo o CDN para bibliotecas de terceiros quase sempre, por causa do item (b). Cabe ao desenvolvedor fazer benchmarks e simular casos de uso, pois pode não haver muita diferença no caso de um site hospedado em bons servidores a curta distância da maioria dos usuários. Spoiler: mesmo com várias requisições HTTP separadas, a latência baixíssima e largura de banda dão vantagem para o CDN.

  2. Comprima seus arquivos Javascript através de uma diretiva de compressão gzip no servidor web (apache, nginx, IIS) ou faça pelo WebPack mesmo com um plugin tipo esse: https://github.com/webpack-contrib/compression-webpack-plugin

  3. Use uma política de cache ajustada com o seu caso de uso. Bibliotecas de terceiros unidas em um arquivo diferente com maior tempo de expiração de cache. Bibliotecas mais usadas em outro arquivo com menor tempo.

  4. Repense sobre a necessidade de cada uma das bibliotecas, se não vale a pena implementar sua própria função ou extraí-la da biblioteca ao invés de baixar toda a biblioteca por completo.

6
  • Resposta bem completa!! Mas ainda não matou minha principal pergunta (Ou se matou não ficou muito claro hehe)... O arquivo final, o Bundle.JS de 10Mb, como o navegador trata esses 10Mb de javascript para baixar em uma requisição? Não é melhor fazer várias pequenas requisições? Nesse caso a união que o WebPack faz seria um tanto inútil, não? Obrigado!
    – Jackson
    Commented 19/01/2018 às 13:21
  • 1
    Será baixado de uma vez só. O caso é que usando o protocolo HTTP 1, requisições de arquivos são muito custosas. Daí a ideia de unir arquivos. Aí que começa a confusão, tem gente unindo jQuery, angular como arquivos do projeto sendo que teria um ganho muito maior com CDN. O Webpack começa a partir disso mas vai muito além! Você pode unir somente os arquivos de projeto (que não se beneficiariam de um CDN). Você pode usar o Code Splitting, plugins e muitos mais. Commented 19/01/2018 às 13:35
  • 1
    No caso do protocolo HTTP 2, as requisições de arquivos não são custosas pois a conexão com o servidor fica aberta eliminando o custo do round trip de requisição. Você pode carregar arquivo por arquivo com o mesmo (+-) custo final de um só arquivo bundled, com a vantagem de que próximas requisições somente trará arquivos mais novos que o que estão na cache. Commented 19/01/2018 às 13:40
  • Perfeito cara. Então 1 Bundle enorme daria a mesma perfomance do que várias requisições no HTTP2? Me recomenda algum artigo em relação à isso? Valeu =)
    – Jackson
    Commented 22/01/2018 às 10:52
  • 1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .