title: Code spliting with dynamic imports still create big files
body: <p>I'm trying to make a production version about my client side code to deploy later in AWS. When I compile and build my web application in development enviromet, everything works fine. But when I try to do it in production enviroment I've got a warning because I've got files bigger than 244KB. </p>
  
  <p>To fix this problem, I have been following the indications of <a href="https://webpack.js.org/guides/code-splitting/#dynamic-imports" rel="nofollow noreferrer">Dynamic Imports</a> But, how you can see in this screen cap, I'm still getting a file very big:</p>
  
  <p><a href="https://i.stack.imgur.com/tNavD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tNavD.png" alt="enter image description here"></a></p>
  
  <p>My application use Node.js, React.js and webpack 4. This is my <strong>package.json</strong></p>
  
  <pre><code>{
    "name": "basketmetrics3",
    "version": "1.0.0",
    "description": "Basketball advanced stats",
    "main": "server.js",
    "scripts": {
      "dev-webpack": "webpack-dev-server --hot --mode development",
      "clean": "rm -rf ./dist",
      "dev": "npm run build-dev &amp;&amp; cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
      "build-dev": "npm run clean &amp;&amp; npm run compile-dev",
      "compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",    
      "compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
      "build": "npm run clean &amp;&amp; npm run compile",
      "start": "npm run build &amp;&amp; node ./dist/assets/js/main.bundle.js",
      "heroku-postbuild": "webpack -p"
    },
    "dependencies": {
      "@babel/polyfill": "^7.4.4",
      "@material-ui/core": "^3.9.3",
      "@material-ui/icons": "^3.0.2",
      "bootstrap": "^4.3.1",
      "cors": "^2.8.5",
      "create-react-app": "^3.0.1",
      "cross-env": "^5.2.0",
      "d3": "^5.9.7",
      "dotenv": "^7.0.0",
      "express": "^4.17.1",
      "express-graphql": "^0.7.1",
      "graphql": "^14.4.2",
      "jquery": "^3.4.1",
      "morgan": "^1.9.1",
      "mysql2": "^1.6.5",
      "popper.js": "^1.15.0",
      "react": "^16.8.6",
      "react-bootstrap": "^1.0.0-beta.10",
      "react-bootstrap-table-next": "^3.1.7",
      "react-bootstrap-table2-paginator": "^2.0.7",
      "react-dom": "^16.8.6",
      "react-multi-language": "^0.4.2",
      "react-router-dom": "^5.0.1",
      "react-simple-tooltip": "^2.6.1",
      "sequelize": "^4.44.2",
      "validator": "^10.11.0"
    },
    "devDependencies": {
      "@babel/cli": "^7.5.5",
      "@babel/core": "^7.5.5",
      "@babel/node": "^7.5.5",
      "@babel/preset-env": "^7.5.5",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.6",
      "babel-plugin-transform-class-properties": "^6.24.1",
      "babel-register": "^6.26.0",
      "css-loader": "^2.1.1",
      "file-loader": "^3.0.1",
      "html-webpack-plugin": "^3.2.0",
      "mini-css-extract-plugin": "^0.5.0",
      "nodemon": "^1.19.1",
      "path": "^0.12.7",
      "style-loader": "^0.23.1",
      "url-loader": "^1.1.2",
      "webpack": "^4.38.0",
      "webpack-cli": "^3.3.6",
      "webpack-dev-server": "^3.7.2"
    }
  }
  </code></pre>
  
  <p>To run my application in development enviroment I do it with this command: <code>npm run dev</code> and to run my application in production environment I do it with <code>npm run start</code>.</p>
  
  <p>And this is my <strong>webpack.config.babel.js</strong>:</p>
  
  <pre><code>import path from "path";
  import HtmlWebpackPlugin from "html-webpack-plugin";
  import MiniCssExtractPlugin from "mini-css-extract-plugin";
  
  const devMode = process.env.NODE_ENV !== "production";
  
  console.log("devMode: " + devMode);
  
  
  module.exports = {
     entry: "./src/client/index.js", //set entry file
  
      // Resolve to output directory and set file
      output: {
          path: path.resolve("dist/assets"),
          filename: "js/[name].bundle.js",
          chunkFilename: "js/[name].bundle.js",
          publicPath: "/assets"   //It's mandatory to define this publicPath to get access to the website when we reload pages
                                  //or we access to them directly with url's which have directories of second level like 
                                  //http://localhost:4000/directory-level-1/directory-level-2
      },
  
      plugins: [
          new HtmlWebpackPlugin({
              template: "./src/client/index.html",    //where is our template
              filename: "../index.html",              //where we are going to put our index.html inside the output directory
              minify: {
                  collapseWhitespace: true,
                  removeComments: true,
                  removeRedundantAttributes: true,
                  removeScriptTypeAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  useShortDoctype: true
              }            
          }),
          new MiniCssExtractPlugin({
              filename: "css/bundle.css",
              minify: {
                  collapseWhitespace: true,
                  removeComments: true,
                  removeRedundantAttributes: true,
                  removeScriptTypeAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  useShortDoctype: true
              }             
          })
      ],
      //It help us to detect errors. 
      devtool: "source-map", 
      // Set dev-server configuration
      devServer: {
          inline: true,
          contentBase: './dist', 
          port: 3000
      },
  
      // Add babel-loader to transpile js and jsx files
      module: { 
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use:[
                      { 
                          loader: "babel-loader",
                          query: {
                              presets: [
                                  "@babel/preset-react"
                              ]
                          }
                      }
                  ]
              },
              {
                  use: [
                      devMode ? "style-loader" : MiniCssExtractPlugin.loader, 
                      "css-loader"],
                  test: /\.css$/
              },
              {
                  test: /\.scss$/,
                  use: [
                      {
                          loader: "style-loader"
                      },
                      {
                          loader: "css-loader",
                          options: {
                              sourceMap: true
                          }
                      },
                      {
                          loader: "saas-loader", 
                          options: {
                              sourceMap: true
                          }
                      }
                  ]
              },
              {
                  test: /\.(png|jpg|gif|svg)$/,
                  loader: "url-loader",
                  options: {
                      limit: 10000,
                      publicPath: "/assets/images/",
                      outputPath: "./images/"
                  }
              },
              {
                  test: /\.(eot|ttf|woff|woff2)$/,
                  loader: "url-loader",
                  options: {
                      limit: 10000,
                      publicPath: "/assets/fonts/",   //It's mandatory to get access to the fonts when we reload pages or access directly
                      outputPath: "./fonts/"
                  }
              }
          ]
      }
  
  }
  </code></pre>
  
  <p>How can I split my code in files smaller than the file that I've got in this moment?</p>
  
  <p><strong>Edit I (solved):</strong></p>
  
  <p>One possible solution to split the client code in files with a size smaller than 244Kb could be adding this entry to webpack.config.babel.js file:</p>
  
  <pre><code>optimization: {
      splitChunks : {
          chunks: "all",
          minSize: 30000,
          maxSize: 100000,
      }
  },
  </code></pre>
  
  <p>Now, I've got several files with a size smaller than 100Kb. Any other option to do the same?</p>