解决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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
Vue实现web分页组件详解
Nov 28 Javascript
webpack v4 从dev到prd的方法
Apr 02 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设计模式 Delegation(委托模式)
2011/06/26 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
微信支付开发维权通知实例
2016/07/12 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
图解javascript作用域链
2019/05/27 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python实现随机选择元素功能
2017/09/14 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python实现单链表的方法示例
2019/09/03 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
keras得到每层的系数方式
2020/06/15 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
database面试题
2013/03/28 面试题
高二历史教学反思
2014/01/25 职场文书
实习生评语
2014/04/26 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
postgresql中如何执行sql文件
2023/05/08 PostgreSQL