Excessive wait times during the construction of a moderately sized application (over 2 minutes) using TypeScript and loaders like Vue-Loader and TS-Loader

Question

Excessive wait times during the construction of a moderately sized application (over 2 minutes) using TypeScript and loaders like Vue-Loader and TS-Loader

I'm currently utilizing Nuxt 2 with TypeScript and the most up-to-date dependency versions available.

Even though my app is of medium size, the compilation time seems excessively slow.

Here are my PC specs: Ryzen 7 2700X (8 Cores/16 Threads) 16 GB DDR4 3000MHZ NVM-SSD

The client-compilation takes approximately 72 seconds, while the server-compilation takes around 55 seconds.

Below you can see excerpts from my package.json:

{
  "name": "nuxt",
  "version": "1.0.0",
  "private": true,
  // Dependencies list...
}

And here's a snippet from my Nuxt.config.js file:


// Import statements and configuration settings...

In addition, I have created a typescript module which includes various loader configurations for improved efficiency during the build process.

Upon running the build command with the --profile flag, it was evident that the ts-loader and vue-loader were significantly impacting the overall performance due to the high request count and time taken per request.

My project consists of approximately 44 .Vue components, all implemented in TypeScript, along with 13 .Vue pages.

If anyone has insights or suggestions on how to optimize the compilation speed, I would greatly appreciate your assistance.

typescript vue.js nuxt.js vue-loader ts-loader

Answer 1

Answer №1

If you're using ts-loader, make sure to check out the following link for a helpful guide on speeding up build times: https://github.com/TypeStrong/ts-loader#faster-builds

Answer 2

If you're using ts-loader, make sure to check out the following link for a helpful guide on speeding up build times: https://github.com/TypeStrong/ts-loader#faster-builds

Answer 3

Answer №2

To cut a long story short, it seems that the issue lies in type-checking being performed on the same thread as the rest of your build process. Fortunately, there is a plugin available that can separate the type-checking process onto a different thread. In my own personal project, implementing this led to a significant 4x increase in speed by following these steps:

Begin by adding the module using your preferred package manager

yarn add fork-ts-checker-webpack-plugin --dev

Then include the following in your webpack configuration:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

plugins: [new ForkTsCheckerWebpackPlugin()]

A sample configuration might resemble the one below:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const webpackConfig = {
  context: __dirname, // for automatic discovery of tsconfig.json
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          // turn off type checker - managed by fork plugin
          transpileOnly: true
        }
      }
    ]
  },
  plugins: [new ForkTsCheckerWebpackPlugin()]
};

Answer 4

To cut a long story short, it seems that the issue lies in type-checking being performed on the same thread as the rest of your build process. Fortunately, there is a plugin available that can separate the type-checking process onto a different thread. In my own personal project, implementing this led to a significant 4x increase in speed by following these steps:

Begin by adding the module using your preferred package manager

yarn add fork-ts-checker-webpack-plugin --dev

Then include the following in your webpack configuration:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

plugins: [new ForkTsCheckerWebpackPlugin()]

A sample configuration might resemble the one below:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const webpackConfig = {
  context: __dirname, // for automatic discovery of tsconfig.json
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          // turn off type checker - managed by fork plugin
          transpileOnly: true
        }
      }
    ]
  },
  plugins: [new ForkTsCheckerWebpackPlugin()]
};

Excessive wait times during the construction of a moderately sized application (over 2 minutes) using TypeScript and loaders like Vue-Loader and TS-Loader

Answer №1

Answer №2

Similar questions

Angular Application for Attaching Files to SOAP Service

How can you display the value of a date type in a TextField?

Managing and refreshing Keycloak/OpenID-Connect Claims within a client application

Struggling with transitioning from TypeScript to React when implementing react-data-grid 7.0.0

"Utilizing the `useState` function within a `Pressable

Trouble authenticating user through express-session with Typescript

Testing a function in Angular using Karma and Jasmine

Connect an HTML tag to information or a property

Creating a unique optional string array interface in TypeScript

Get React-table TS up and running on your local machine using VS Code

The for loop displays only the most recent data fetched from Firebase

The Vuejs progressive web app service worker is failing to function offline when deployed on Heroku

Vue.js: UI does not update when Array Object Property is modified

Dealing with URIError: Incorrect URI format encountered while using vue-router

Class for Eliminating the Background Image Using Bootstrap

Asynchronous update of array elements - lack of firing watch events

Issues with JSONPATH in typescript failing to grab any values

Angular Toaster Notification - There are currently no toaster containers set up to display notifications

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

Interpolating values in Vue for key-value pairs