背景

我司前端项目框架主要是 vue,多个项目聚集在同一个仓库下,共用公共组件、页面、工具函数等。基于以上前提,我们需要对不同的项目分别进行打包,并解决单页应用强制刷新引起的问题,所以没有使用 vue-cli 来创建,而是使用 webpack 重新编写了一套打包流程。

随着代码量的增长(百万行级),加之电脑硬件性能不高等因素,我感觉项目初次启动时间越来越慢,目前大概在一分半到两分钟之间。某次编译启动时间如下:

泄特!这大大降低了开发体验。

找方案

网络上有很多关于 webpack 构建时间优化的文章,随便一搜就是一堆,这里就不一一列出来了。总结下来,可以由一下几个方面入手:

  • vue、vuex等不轻易更改的库,使用外部链接
  • 文件缓存
  • 多核并发编译

在一切开始之前,我更推荐先阅读以下官方文档:

方案实施

我基本上是按照上面的思路进行的,截取部分代码以作参考:

const config = {
externals: { // 下面这些库使用外部链接,不会被打包
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'buffer': 'undefined', // js-base64 require('buffer')
}, module: {
rules: [
{ // 对 vue 文件,使用 cache-loader 进行缓存
test: /\.vue$/,
loader: 'vue-loader',
options: {
cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/vue-loader'),
cacheIdentifier: 'cache-loader:{version} {process.env.NODE_ENV}'
}
},
{ // 对 .js 文件,开启 babel-loader 自带的缓存
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?cacheDirectory=true',
},
]
// 其他规则
}
}

经过这两步简单的操作,把原本 100s 左右的构建时间,缩短成 30s 左右。

当然,还可以使用 happyPack 或是 thread-loader 进一步压榨机器性能。然而配置略微复杂,且目前已够用,以后有需要在加吧。

其中不得不提一下 vue 规则中的 cacheDirectory,按照上面编写的路径,打包完成后,我没有在 node_modules/.cache 文件夹下找到 vue-loader 这个缓存文件夹,以及 babel-loader 缓存文件夹。但如果更改 vue 规则中 cacheDirectory 的路径,譬如说项目根目录下,打包完成后,会在跟目录下创建 vue-loader 这个文件夹,同时,在 node_modules/.cache/ 文件夹下也会生成 vue-loader 和 babel-loader 文件夹。存疑

如何减少 webpack 构建 vue 项目的编译时间的更多相关文章

  1. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  2. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

  3. 用Webpack构建Vue项目

    开始之前,需要安装node环境.(安装过程在此就不啰嗦了)   1.创建基本结构 首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录. 创建一个没有任何依赖关系的pack ...

  4. 提高 webpack 构建 Vue 项目的速度

    前言 最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大, ...

  5. webpack构建vue项目(再谈配置)

    webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...

  6. webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理

    今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm ...

  7. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  8. vue-cli快速构建vue项目模板

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...

  9. 自动化工具构建vue项目

    其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...

随机推荐

  1. PIE SDK打开自定义栅格数据

    1. 数据介绍 信息提取和解译的过程中,经常会生成一部分中间临时栅格数据,这些数据在执行完对应操作后就失去了存在的价值,针对这种情况,PIE增加了内存栅格数据集,来协助用户完成对自定义栅格数据的读取和 ...

  2. PIE SDK创建金字塔算法

    1.算法功能简介 为栅格影像建立了金字塔,这些影像便能快速进行显示.除了在屏幕上显示外,金字塔还包含了很多其他信息.如果没有金字塔,那么在显示时就要访问整理栅格数据集,然后进行大量计算来选择哪些栅格像 ...

  3. 洛谷 p1387最大正方形

    洛谷 p1387最大正方形 题目描述 在一个n*m的只包含0和1的矩阵里找出一个不包含0的最大正方形,输出边长. 输入格式 输入文件第一行为两个整数n,m(1<=n,m<=100),接下来 ...

  4. C#实现outlook自动签名

    Outlook下实现自动签名的方式   网上找到一篇资料是在outlook里用vba实现的,但是这样实现的方式由于数字认证的问题不便于部署 在此介绍一种C#下实现的方式,目前确定的outlook版本为 ...

  5. MySQL语言分类——DDL

    DDL的全称Data Definition Language,即数据定义语言 DDL的语法有:create.alter.drop.rename.truncate.对此做一个详细的解释: create ...

  6. set实现交集,并集,差集

    let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // ...

  7. 由MQTT topic的正则表达式匹配引发的特殊字符"/"匹配思考

    正则表达式中的'/'替换 近期项目对接OneNET的MQTT物联网套件,需要完成命令下发流程. 流程要求: (1)设备在接收平台下发的命令(topic为$sys/{pid}/{device-name} ...

  8. Spring boot配置MongoDB以及Morphia踩坑记录

    pom 因为项目中采用Morphia(MongoDB的ODM框架,对象-文档映射(object-document mapper)),因此需要在pom文件中引入相应依赖: <dependency& ...

  9. URL&HTTP协议

    一般来讲,URL地址有五个部分组成,协议,域名,端口,路径,URL地址参数,通常“//'之前的部分就是协议 常用的协议有: http 超文本传输协议 htttps http+ssl ssh 用来实现远 ...

  10. centos自动同步服务器时间

    原文:https://my.oschina.net/yysue/blog/1628733 1.安装ntpdate yum install ntpdate -y 2.测试是否正常 ntpdate cn. ...