Question

我目前正在将基于jQuery的Web应用程序迁移到Vue.js。为了逐步进行，我为每个模块创建了一个不同的应用程序。

构建代码后，有一个公共文件：

assets/js/vendors.d2c6c799.js

每个应用程序都有其自己的文件：

assets/js/admin/dashboard.5c4be0d8.js
assets/js/admin/users.5c4be0d8.js
assets/js/alerts/main.5c4be0d8.js
.....

在这里一切都完美。问题是，如果这些应用程序使用相同的常规组件，则会生成另一个文件，例如：

assets/js/admin/dashboard~users/users.c3cbae3a.js
assets/js/admin/users~main/users.c3cbae3a.js
assets/js/alerts/dashboard~main/dashboard.c3cbae3a.js
assets/js/alerts/users~main/main.c3cbae3a.js
.....

这有点烦人和困惑。我希望每个应用程序都有自己的文件，或同一js文件中的所有共享组件，但不像上面的示例那样生成一堆js文件。那可能吗？预先感谢。

Answer 1

由于webpack 4配置自动将共享模块拆分成自己的块。

您可以通过optimization.splitChunks配置属性（docs）更改此行为。

要完全禁用默认的拆分行为，请将default和vendor缓存组设置为false：

optimization: {
    splitChunks: {
        cacheGroups: {
            default: false,
            vendor: false,
        }
    }
}

一堆由于共享组件而生成的捆绑文件

1 个答案: