Huge compilation time with Quasar CLI + Typescript

[aislan]

Hello guys, I’m here to ask help to fix or at least decrease a little bit my huge compilation time and hmr updates.
Sometimes it take ~5m in my machine, but in in the other machines it is ~10m and for HMR is like 5 or 10sec when saving some components. The project isn’t that big.
My project was being developed with Vue CLI 3 and Vuetify with compilation times really lower than now., but I have chosen to bring it to Quasar because the layout responsive classes here just works and components are better in general.
To convert it to Quasar, what I did was just create a new project with Quasar CLI and add the extension plugin with quasar ext add @quasar/typescript and set some defaults and bring live the Quasar components replacing the old ones in the project.

Here is my tsconfig file as it is set right now:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "allowJs": true,
    "sourceMap": false,
    "experimentalDecorators": true,
    "target": "esnext",
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["quasar"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["dist", ".quasar", "node_modules"]
}

and for quasar.conf.js I have set two aliases:

extendWebpack(cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        });
        cfg.resolve.alias = {
          ...cfg.resolve.alias,
          modules: path.resolve(__dirname, './src/modules'),
          '@': path.resolve(__dirname, './src')
        };
      }
    },

In the same file I have support TS set as below:

supportTS: {
  tsCheckerConfig: {
     eslint: true
  }
},

Any helps will be much appreciated.

[Allan-EN-GB]

Hey,

Unfortunately, it’s a common issue with TS in general at the moment. With this in mind, the best advice we have is to disable linting in dev mode, so wrap your linting module above in if (process.env.NODE_ENV === 'production') { so it becomes.

extendWebpack(cfg) {
  if (process.env.NODE_ENV === 'production') {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        });
  }
        cfg.resolve.alias = {
          ...cfg.resolve.alias,
          modules: path.resolve(__dirname, './src/modules'),
          '@': path.resolve(__dirname, './src')
        };
      }
    },

It’s worked for the rest of us who complained about this

[aislan]

Many thanks @Allan-EN-GB . I’m really grateful with your tip. For ours it’s working like a charm!!
Huge lifetime saver.

[kelux]

Hi @aislan ,
I am migrating a project with Quasar Cli 1 with javascript to Typescript. I’ve made it work in development but when compiling for production I get a lot of errors. These are by the Eslint configuration.
Could you pass your config files? (Eslint, Quasar, quasar.extensions, tsconfig)
Thank you!

[kelux]

I finished configuring my entire project from 0. Now it works perfectly and quite fast. Also I can enable linting.