Solve the problem of very slow packaging after using typescript for vue cli

Preface

Recently, a new project was opened. Although it uses the vue technology stack, it still has typescript for the robustness of the project, which leads to the following questions.

question

I used ts-loader to package react projects before, and I felt that it was very slow. In the development environment, after saving each time, it took about 10 seconds to build. At that time, in order to solve this problem, ts-loader was replaced with babel's typescript plug-in. The result was very fast, and the construction could be completed within one second each time it was saved. This time I use typescript in vue. It is quite fast in the development environment, but when building production packages, the process can be stuck, and the experience is very bad. Next, I will explain how to replace the typescript build tool.

Replace ts-loader

Before modifying the vue webpack configuration, we need to know how vue configures ts-loader, run the following code, and output the webpack configuration file:

vue inspect > 

Open search ts-loader and you can see the following configuration:

/* ('ts') */
{
  test: /\.ts$/,
  use: [
  /* ('ts').use('cache-loader') */
  {
    loader: 'cache-loader',
    options: {
    cacheDirectory: '/Users/edz/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader',
    cacheIdentifier: 'aee3033a'
    }
  },
  /* ('ts').use('babel-loader') */
  {
    loader: 'babel-loader'
  },
  /* ('ts').use('ts-loader') */
  {
    loader: 'ts-loader',
    options: {
    transpileOnly: true,
    appendTsSuffixTo: [
      '\\.vue$'
    ],
    happyPackMode: false
    }
  }
  ]
},
/* ('tsx') */
{
  test: /\.tsx$/,
  use: [
  /* ('tsx').use('cache-loader') */
  {
    loader: 'cache-loader',
    options: {
    cacheDirectory: '/Users/edz/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader',
    cacheIdentifier: 'aee3033a'
    }
  },
  /* ('tsx').use('babel-loader') */
  {
    loader: 'babel-loader'
  },
  /* ('tsx').use('ts-loader') */
  {
    loader: 'ts-loader',
    options: {
    transpileOnly: true,
    happyPackMode: false,
    appendTsxSuffixTo: [
      '\\.vue$'
    ]
    }
  }
  ]
}

You can see that ts-loader is used and babel is also used, which provides a lot of convenience for our later configuration.

First, delete the configuration of ts-loader. Because the configuration of vue webpack uses webpack-chain, this tool is also needed to modify it. The code is as follows:

// 

 = {
  chainWebpack: config => {
    ('ts').('ts-loader')
    ('tsx').('ts-loader')
  }
}

Then install babel's typescript plugin

yarn add @babel/preset-typescript @babel/plugin-transform-typescript

Then modify it as follows:

 = {
  presets: [
    '@vue/app',
    "@babel/preset-typescript"
  ],
  plugins: [
    "@babel/plugin-transform-typescript"
  ]
}

If you use jsx in your code, you may also need to add the following configuration items. Anyway, I am having an error in analyzing jsx.

 = {
  presets: [
    '@vue/app',
    ["@babel/preset-typescript", {
      "allExtensions": true,
      "isTSX": true
    }],
  ],
  plugins: [
    "@babel/plugin-transform-typescript"
  ]
}

Finally pack it, well~ much faster than before!

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.