ts-loader extremely slow with Webpack 2

[mattiLeBlanc]

Hi,

We are using FountainJs starter which uses webpack 2.1 and TS 2.1.0.
I have a fairly small app with maybe 20 TS files.
Building this project takes about 2 minutes for the ts-loader part only.

Is there any way to improve this?

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('../package.json');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json-loader'
        ]
      },
      {
        test: /.ts$/,
        exclude: /node_modules/,
        loader: 'tslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.(css|styl|stylus)$/,
        loaders: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader?minimize!postcss-loader!stylus-loader'
        })
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate-loader',
          'ts-loader'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html-loader'
        ]
      },
      {
        include: /.pug$/,
        loader: [
          'pug-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    FailPlugin,
    new HtmlWebpackPlugin({
      template: conf.path.src('index.pug')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer],
        resolve: {},
        ts: {
          configFileName: 'tsconfig.json'
        },
        tslint: {
          configuration: require('../tslint.json')
        }
      }
    })
  ],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  },
  entry: {
    app: `./${conf.path.src('index')}`,
    vendor: Object.keys(pkg.dependencies)
  }
};

[HerringtonDarkholme]

The webpack configuration is not minimal, it's hard to say which part is slow, indeed.

My suggestion is

1. use plain tsc to compile your code.
2. remove ng-annotate loader and retry
3. use profile to get insights of webpack https://webpack.js.org/configuration/other-options/#profile

[mattiLeBlanc]

The TS-loader part takes about 2.5 minutes. All the other tasks are done in seconds.
I tried remove and or separating ng-annotate but to no avail.

Ill will see what Profile will tell me.

[HerringtonDarkholme]

Your configuration is not minimal.

This is crucial, please provide a minimal configuration.

[mattiLeBlanc]

Just to be clear: we are using a standard setup made by the fountiainJs boys. I am not a webpack expert so it is hard to understand how it all works and how to optimise it. But I will do my best.

[johnnyreilly]

You might want to move to webpack 2.2 as well - it shipped last week.

[dmitrykurmanov]

Here is https://github.com/dmitrykurmanov/webpack2_tsloader_example small example and it fast. Maybe it will help.

[mattiLeBlanc]

Hi,
I am ashamed to have to report that the slowness didn't have anything to do with ts-loader. I had a gigantic flexbox styl file (taken from angular material's flexbox attributes) and that was slowing everything down enormously.
I can now focus on trying to optimise this specific issue. Thanks and sorry for the panic.

[johnnyreilly]

No worries - thanks for reporting back!

[Hosar]

@mattiLeBlanc I'm having the same issue, could you please provide more details about your solution, or how did you know that the flexbox was slowing down the build process.
Thanks in advance.

[mattiLeBlanc]

It wasn't flexbox in particular. It was my Stylus styles that where
imported multiple times, including a flex box file which is pretty large.
I ended up having a code duplication times 10 which made everything much
slower.
I used imports at the top of my stylus file to import certain global files
like flexbox, typography, colours etc. So for each file this import
happened (even without using require which should import only ones).
In the end, I decided to go with one import file at the root of my stylus
folder that imported all children.

On 14 April 2017 at 13:51, Hosar [e-mail] wrote:

@mattiLeBlanc https://github.com/mattiLeBlanc I'm having the same
issue, could you please provide more details about your solution, or how
did you know that the flexbox was slowing down the build process.
Thanks in advance.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/TypeStrong/ts-loader/issues/452#issuecomment-294079673,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFCkq5XgBGHzvtC0OlhN1y4oo_wlfl7-ks5rvu1LgaJpZM4Lqk1g
.

[Hosar]

@mattiLeBlanc thanks for the explanation.