Linting slowing build step by a lot

Describe the issue

Currently, linting is part of the webpack build step using eslint-loader and it greatly slows the build process.

To clear the caches for simulating cold build

1. rm -rf .cache-loader
2. rm -rf node_modules/.cache

To Profile

Steps for setting up accurate profiling (on development):

1. Install speed-measure-webpack-plugin as dev dependency
2. Wrap merged webpack config with the plugin in webpack.config.dev.js like so:

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

const developmentConfig = smp.wrap(merge([ /* ... */ ]));

1. Disable parallelism in webpack config:

const developmentConfig = smp.wrap(merge([
  parts.setFreeVariable('process.env.NODE_ENV', 'development'),
  parts.setFreeVariable('process.env.DEBUG_WORKBOX', process.env.DEBUG_WORKBOX),
  commonConfig,
  {
    /* ... */
    parallelism: 1, // <-- here
    /* ... */
  }
]));

1. To test with/without linting step, simply comment/uncomment this code block in webpack.config.common.js:

  // parts.lintJavaScript({
  //   include: parts.PATHS.app,
  // }),

Expected behavior

The build is 45% faster without the eslint-loader build step.

Profiling results

Left: with linting step Right: without linting step

Additional context

Profiled on branch https://github.com/nusmodifications/nusmods/tree/webpack-4.1/www

[ZhangYiJiang]

This is now implemented via #1052. I removed lint and type checks from the production Webpack config - in CI, those are ran in separate stages, and our deployment process is semi-automated, so all code that’s pushed into production should already have those checks run, which means rerunning them is a waste of time.

For development, Flow, ESLint and Stylelint are run by default, but can be disabled via env variables DISABLE_FLOW, DISABLE_ESLINT and DISABLE_STYLELINT. We make no assumption about the user’s editor, so by default these are enabled in case the user wants to use nano to write their code.

[ZhangYiJiang]

I still think we need eslint-loader for development, since not all editors support ESLint inline. Hot reload performance is the main concern for development, and I think it should still be acceptable right now.

How about we put it behind a flag that can be disabled by users with editors that have inline ESLint support ? @li-kai @taneliang

I’ve removed lintJavaScript from prod script in the Webpack 4 branch