Performance Webpack Build.js – javascript desempenho webpack

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!

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.