前端 - webpack4 项目目前构建超20分钟，如何优化构建速度？

Question

项目是ruoyi vue2版本二开的，现在构建速度要20分种往上，明明src文件夹内代码只有2.9M，打完包会有380M这么夸张，开启webpack-bundle-analyzer查看，发现大量的重复依赖被多次打包，而且有几个特别大的依赖在。

知道的优化方案，分包，cnd之类的都有尝试，奈何没有看出来有什么不同。

每次构建都会在95%的时候等待超20分钟。实在是不知道怎么搞了。

补充一下进程时间

Answer 1

1. 你要想办法让整个过程可观测，比如你的 95% 等待 20 分钟，你已经说了一周了，我也猜了一周了，到现在都不知道是啥
2. 几个大模块很多地方都在用，你可以用 splitChunks 单独把它们拆出来，可能可以减少一些重复
3. 使用 ruoyi，等于在 webpack 上又包了一层，所以你应该想办法拿到最终生效的 webpack.config.js，才方便大家分析
4. 目前来看你的分包策略不好，没有按照路由来拆分，实际生产中不应该这样

Answer 2

分析出来的报告中，明显会看到有很多的依赖重复被打包了，比如说 xlsx.js 、codeMirror等等，这些都可以单独拆出来。

另外就是最好提供一下 webpack 的 splitChunks 配置项。
我看Ruoyi Vue2版本默认是这样配置的 ruoyi-ui/vue.config.js · 若依/RuoYi-Vue

module.exports = {
  chainWebpack(config) {
    config.when(process.env.NODE_ENV !== 'development', config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [{
        // `runtime` must same as runtimeChunk name. default is `runtime`
          inline: /runtime\..*\.js$/
        }])
        .end()

      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
            priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
    })
  }
}

可以按照他配置的方式把上面提到的一些重复打包的依赖单独提取出来。

Answer 3

开一下Webpack的持久化缓存，可以减少每次构建的时间：

module.exports = {
  cache: {
    type: 'filesystem',
    // 配置缓存目录
    cacheDirectory: path.resolve(__dirname, '.webpack_cache')
  },
};