解决vue cli使用typescript后打包巨慢的问题


Posted in Javascript onSeptember 30, 2019

前言

最近新开了一个项目,虽然用的是 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/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 的配置,因为 vue webpack 的配置使用的是 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 插件

yarn add @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"
  ]
}

最后再打包,嗯~ 比之前快多了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很可爱的输入框
Aug 03 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
创建一个类Person的简单实例
May 17 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
Vue简单实现原理详解
May 07 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 #Javascript
JavaScript键盘事件响应顺序详解
Sep 30 #Javascript
vue自动化路由的实现代码
Sep 30 #Javascript
js实现图片上传即时显示效果
Sep 30 #Javascript
vue实现select下拉显示隐藏功能
Sep 30 #Javascript
createObjectURL方法实现本地图片预览
Sep 30 #Javascript
微信小程序实现分享商品海报功能
Sep 30 #Javascript
You might like
简单的php 验证图片生成函数
2009/05/21 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript函数库-集合框架
2007/04/27 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python中几种导入模块的方式总结
2017/04/27 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python numpy数组中的复制知识解析
2020/02/03 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
计算机专业求职信
2014/06/02 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
指导老师鉴定意见
2015/06/05 职场文书
Golang: 内建容器的用法
2021/05/05 Golang