解决vue cli使用typescript后打包巨慢的问题
前言
最近新开了一个项目，虽然用的是vue技术栈，但是为了项目的健壮性，还是强上了typescript,于是引出了下面的问题。
问题
之前使用过ts-loader打包react项目，给我的感觉就是巨慢，开发环境下，每次保存后，需要等10秒钟左右才能构建完成，当时为了解决这个问题，把ts-loader替换成了babel的typescript插件，结果是非常的快，每次保存一秒中之内就能完成构建。这次在vue中使用typescript，开发环境下还算快，但是构建生产包时，进程都能够被卡死，体验非常糟糕，接下来讲解如何替换typescript构建工具。
替换ts-loader
修改vuewebpack配置之前，我们需要知道vue是如何配置ts-loader的，运行如下代码，输出webpack配置文件：
vueinspect>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/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader',
cacheIdentifier:'aee3033a'
}
},
/*config.module.rule('ts').use('babel-loader')*/
{
loader:'babel-loader'
},
/*config.module.rule('ts').use('ts-loader')*/
{
loader:'ts-loader',
options:{
transpileOnly:true,
appendTsSuffixTo:[
'\\.vue$'
],
happyPackMode:false
}
}
]
},
/*config.module.rule('tsx')*/
{
test:/\.tsx$/,
use:[
/*config.module.rule('tsx').use('cache-loader')*/
{
loader:'cache-loader',
options:{
cacheDirectory:'/Users/edz/Desktop/project/senguo/cashier-admin/node_modules/.cache/ts-loader',
cacheIdentifier:'aee3033a'
}
},
/*config.module.rule('tsx').use('babel-loader')*/
{
loader:'babel-loader'
},
/*config.module.rule('tsx').use('ts-loader')*/
{
loader:'ts-loader',
options:{
transpileOnly:true,
happyPackMode:false,
appendTsxSuffixTo:[
'\\.vue$'
]
}
}
]
}
可以看到使用到了ts-loader,同时还使用到了babel,这倒是为我们后期的配置提供了不少方便。
首先删除ts-loader的配置，因为vuewebpack的配置使用的是webpack-chain，所以这里也需要用到这个工具才能进行修改，代码如下：
//vue.config.js
module.exports={
chainWebpack:config=>{
config.module.rule('ts').uses.delete('ts-loader')
config.module.rule('tsx').uses.delete('ts-loader')
}
}
接着安装babel的typescript插件
yarnadd@babel/preset-typescript@babel/plugin-transform-typescript
然后修改babel.config.js如下：
module.exports={
presets:[
'@vue/app',
"@babel/preset-typescript"
],
plugins:[
"@babel/plugin-transform-typescript"
]
}
如果你在代码中使用到了jsx，那么可能还需要添加如下配置项，反正我是遇到了解析jsx出错的问题。
module.exports={
presets:[
'@vue/app',
["@babel/preset-typescript",{
"allExtensions":true,
"isTSX":true
}],
],
plugins:[
"@babel/plugin-transform-typescript"
]
}
最后再打包，嗯～比之前快多了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。