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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部