解决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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
php验证码生成器
2017/05/24 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python next()和iter()函数原理解析
2020/02/07 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
工程售后服务承诺书
2014/05/21 职场文书
亚运会口号
2014/06/20 职场文书
社区服务活动感想
2015/08/11 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python