vuecli3 打包加载超慢_解决vue cli使用typescript后打包巨慢的问题

前言

最近新开了一个项目，虽然用的是 vue 技术栈，但是为了项目的健壮性，还是强上了 typescript, 于是引出了下面的问题。

问题

之前使用过 ts-loader 打包 react 项目，给我的感觉就是巨慢，开发环境下，每次保存后，需要等10秒钟左右才能构建完成，当时为了解决这个问题，把 ts-loader 替换成了 babel 的 typescript 插件，结果是非常的快，每次保存一秒中之内就能完成构建。这次在 vue 中使用 typescript，开发环境下还算快，但是构建生产包时，进程都能够被卡死，体验非常糟糕，接下来讲解如何替换 typescript 构建工具。

替换 ts-loader

修改 vue webpack 配置之前，我们需要知道 vue 是如何配置 ts-loader的，运行如下代码，输出 webpack 配置文件：

vue inspect > output.js

打开 output.js 搜索 ts-loader,可以看到如下配置：

/* config.module.rule('ts') */

{

test: /\.ts$/,

use: [

/* config.module.rule('ts').use('cache-loader') */

{

loader: 'cache-loader',

options: {

cacheDirectory: '/Users/edz/