如何减少 webpack 构建 vue 项目的编译时间

vue

背景

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

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

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

找方案

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

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

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

  • webpack 构建性能
  • webpack loader
  • vue-loader cacheDirectory / cacheIdentifier

方案实施

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

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 项目的编译时间 的全部内容, 来源链接: utcz.com/z/379560.html

回到顶部