Upgrade the project to support code-splitting

[wiadev]

Hi

Can you upgrade the project to support the code-splitting?

Thanks.

[kwelch]

What is preventing code-splitting now? Do you have an error or something we can look into to observe it not splitting properly?

[wiadev]

I've followed your commits and managed to upgrade to webpack 4.

but after upgrading webpack 4, the hot-reload time is relatively very slow, not even close to webpack 3.

Do you have any idea?

the webpack.config.dev.js is same as your config.

[wiadev]

webpack.config.dev.js

import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import HtmlReplaceWebpackPlugin from "html-replace-webpack-plugin";
import path from "path";
import HardSourceWebpackPlugin from "hard-source-webpack-plugin";
import CompressionPlugin from 'compression-webpack-plugin';
const zopfli = require('@gfx/zopfli');

import styleVariables from "./src/styles";
import mixins from "./src/styles/mixins";

export default {
  resolve: {
    extensions: ["*", ".js", ".jsx", ".json"],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devtool: "cheap-module-eval-source-map", // more info:https://webpack.js.org/guides/development/#using-source-maps and https://webpack.js.org/configuration/devtool/
  entry: [
    // must be first entry to properly set public path
    "./src/webpack-public-path",
    "core-js/modules/es6.promise",
    "core-js/modules/es6.array.iterator",
    "react-hot-loader/patch",
    "webpack-hot-middleware/client?reload=true",
    path.resolve(__dirname, "src/index.js") // Defining path seems necessary for this to work consistently on Windows machines.
  ],
  target: "web",
  mode: 'development',
  output: {
    path: path.resolve(__dirname, "dist"), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "/",
    filename: "bundle.js"
  },
  plugins: [
    new HardSourceWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      // Create HTML file that includes references to bundled CSS and JS.
      template: "!!raw-loader!src/index.html",
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    new HtmlReplaceWebpackPlugin([
      {
        pattern: /<%- output %>/g,
        replacement: function() {
          return `
            <script type="text/javascript">
              window.PROVEN_CONFIG = {
                SEGMENT_KEY: "x7w5RHI6JrEAvCKhdSSdUQbflTIXaPgp"
              }
            </script>
          `;
        }
      }
    ]),
    new CompressionPlugin({
      compressionOptions: {
         numiterations: 15
      },
      algorithm(input, compressionOptions, callback) {
        return zopfli.gzip(input, compressionOptions, callback);
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.eot(\?v=\d+.\d+.\d+)?$/,
        use: ["file-loader"]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/font-woff"
            }
          }
        ]
      },
      {
        test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/octet-stream"
            }
          }
        ]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "image/svg+xml"
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|png|gif|ico)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: [
          /react-input-range/,
          /react-sweet-progress/,
          /react-accessible-accordion/,
          /react-responsive-spritesheet/,
          /material-ui/,
          /react-slick/
        ],
        use: ["style-loader", "css-loader"]
      },
      {
        test: /(\.css|\.scss|\.sass)$/,
        exclude: [
          /react-input-range/,
          /react-sweet-progress/,
          /react-accessible-accordion/,
          /react-responsive-spritesheet/,
          /material-ui/,
          /react-slick/
        ],
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              modules: true,
              importLoaders: 1,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
            }
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require("postcss-import")({
                  plugins: [require("stylelint")()]
                }),
                require("postcss-mixins")({ mixins }),
                require("postcss-url")(),
                require("postcss-nested"),
                require("postcss-cssnext")({
                  features: {
                    customProperties: {
                      variables: styleVariables
                    }
                  }
                }),
                require("postcss-reporter")(),
                require("postcss-hexrgba")
              ],
              sourceMap: true
            }
          }
        ]
      },
    ]
  }
};

[kwelch]

Not sure exactly, one thing did jump out. Why are you using a compression plugin for local development.

Can you clone slingshot and see if the hot-reload is still slow using that? If so we can address that, if not it would be related to some of your customizations and this is not the best avenue to solve that.

[wiadev]

I've just followed compression config from their README. I thought I should have it in dev config as well.

Do we need it for prod only?

[kwelch]

I believe that compression should only happen for production builds. Dev builds should don't need to be small, but they should be fast. Production the inverse is true.