Initial build: ~28s, Incremental: ~15s --> Tried many options, nothing seems to help. Stuck.

[ianks]

Hey guys! I am hoping someone here with more experience can help me analyze my build performance. Initial build doesn't bother me, but having a slow incremental build is a productivity killer so that is my main concern.

Specs

• webpack: 2.0.4-beta
• Typescript with ts-loader which is then piped into Babel
• React/Redux/etc.
• scss (with bootstrap-loader)
• I am leaving my modules as es6 modules so webpack2 can resolve them and perform tree-shaking

Stats

stats.json

What I have tried

I have been scouring the internet for days attempting to fix this problem. As sad as it is, I have come up completely empty handed. This leads me to believe I am bound by some part of the build system that I cannot seem to find.

Essentially, I would just like to find my problem so I can begin to look for a solution.

Here is an (in-exhaustive list) of things I have tried.

• Including only node_modules in resolve.moduleDirectories as mentioned in resolve.root vs moduleDirectories #472
• Splitting vendor dependencies into a separate entry point (not much help :/)
• DLL
• Reverting to css-loader ^0.14
• Using a null-loader for /\.tsx?$/ (this brought my initial build time down to 13s)
• Removing babel from the pipeline (no effect)
• Using a null-loader for /\.scss?$/ (no effect on initial build time and incremental time?)
• Pre-fetching (seems to have no effect)

As of now, the bottleneck definitely is in the tsx -> babel pipeline. The question is what is it specifically?

Config

I dumped the JSON of my config, and filled in portions for readability:

{
  "port": 8000,
  "output": {
    "path": "/path/to/dist/assets",
    "filename": "[name].js",
    "hash": true,
    "publicPath": "/assets/"

  },
  "sasslint": {
    "configFile": "/path/to/config/sass-lint.yml",
    "emitWarning": true
  },
  "resolve": {
    "extensions": ["", ".js", ".ts", ".tsx"],
    "root": "/path/to/src",
    "modulesDirectories": ["node_modules"],
    "alias": {
      "actions": "/path/to/src/actions",
      "components": "/path/to/src/components",
      "sources": "/path/to/src/sources",
      "stores": "/path/to/src/stores",
      "styles": "/path/to/src/styles",
      "validators": "/path/to/src/validators",
      "forms": "/path/to/src/forms",
      "reducers": "/path/to/src/reducers",
      "constants": "/path/to/src/constants",
      "utils": "/path/to/src/utils",
      "containers": "/path/to/src/containers",
      "clients": "/path/to/src/clients",
      "images": "/path/to/src/images"

    }

  },
  "sassResources": [
    "src/styles/config/_pre-bootstrap-customizations.scss",
    "src/styles/config/_colors.scss",
    "src/styles/config/_mixins.scss"

  ],
  "sassLoader": {
    "includePaths": [
      "/path/to/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets"

    ],
    "outputStyle": "expanded"

  },
  module: {
    noParse: /node_modules\/qs\/dist\/qs.js/,
    loaders: [
      {
        test: /bootstrap\/js\/|react-bootstrap-daterangepicker/,
        loader: 'imports?jQuery=jquery'
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      },
      {
        test: /\.scss$/,
        loader: 'style!css!sass!sass-resources!sasslint',
      },
      {
        test: /\.less$/,
        loader: 'style!css!less'
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=8192&mimetype=application/font-woff'
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=8192&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=8192&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=8192&mimetype=image/svg+xml'
      },
      {
        test: /\.tsx?$/,
        loader: 'babel?cacheDirectory!ts!tslint',
        include: [
          path.resolve(__dirname, './../../src')
        ]
      },
      {
        test: /node_modules\/auth0-lock\/.*\.js$/,
        loader: 'transform/cacheable?brfs!transform/cacheable?packageify'
      },
      {
        test: /\.ejs$/,
        loader: 'null'
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.csv$/,
        loader: 'dsv'
      }
    ]
  },
  "entry": {
    "app": [
      "webpack-dev-server/client?http://127.0.0.1:8000",
      "webpack/hot/only-dev-server",
      "./src/components/run.tsx"
    ],
    "vendor": [
      "accounting",
      "auth0-lock",
      "babel-polyfill",
      "bootstrap-sass",
      "chart.js",
      "history",
      "jquery",
      "jquery-xml2json",
      "jquery.soap",
      "jwt-decode",
      "lodash",
      "moment",
      "monet",
      "node-bourbon",
      "normalize.css",
      "papaparse",
      "qs",
      "react",
      "react-addons-test-utils",
      "react-bootstrap",
      "react-bootstrap-daterangepicker",
      "react-chartjs",
      "react-daterange-picker",
      "react-dom",
      "react-redux",
      "react-router",
      "react-router-bootstrap",
      "redux",
      "redux-localstorage",
      "redux-localstorage-filter",
      "redux-mock-store",
      "redux-promise-middleware",
      "redux-router",
      "redux-thunk",
      "string",
      "superagent"
    ]
  },
  "devServer": {
    "contentBase": "./src/",
    "historyApiFallback": true,
    "hot": true,
    "port": 8000,
    "publicPath": "/assets/",
    "quiet": false,
    "noInfo": false,
    "stats": {
      "assets": true,
      "colors": true,
      "version": false,
      "hash": false,
      "timings": true,
      "chunks": true,
      "chunkModules": false
    }
  },
  "cache": true,
  "watch": true,
  "devtool": "inline-source-map", // have tried many combinations
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.js',
      selectedChunks: Infinity
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery'
    }),
    new webpack.DefinePlugin({
      __DEV__: true
    })
  ]
}

P.S.

Is there a way to get stats for incremental builds?

[jwbay]

There's an issue with ts-loader's incremental build performance in large projects: TypeStrong/ts-loader#78
You can try setting the transpileOnly flag and relying on your IDE for errors

[ianks]

@jwbay Thank you for the information. Unfortunately, setting transpileOnly shaves off only 2 seconds of the incremental, leaving me at ~13s.

Invoking tsc directly gives me stats like this:

$ time tsc
tsc  3.32s user 0.08s system 137% cpu 2.465 total

[ianks]

When I set the null-loader for *.tsx files, my initial build is ~13s. Is that somewhat normal?

[sokra]

#1922 was fixed, so you could try again... Should be faster now...

[Strate]

Try to move to https://github.com/s-panferov/awesome-typescript-loader with useBabel, forkChecker, useBabel, and useCache options enabled.