如何在应用之间共享webpack vendor.bundle.js文件?

时间:2018-07-19 15:43:52

标签: webpack frontend webpack-2 html-webpack-plugin webpack-4

当前,我们的Web应用程序是18多个AngularJS SPA。他们每个人都在自己的docker容器中运行,在父域的自己的路径上运行,并且每个人都有自己的webpack配置,尽管它们都来自共享库中的相同基本配置。

作为该配置的一部分,它们每个都生成自己的: app.bundle.js app.vender.js

我要解决的问题是app.vendor.js对于我的所有环境都是相同的。它包括:

vendor: [
        'angular',
        'angular-ui-bootstrap',
        'underscore'
      ]

我们在我们的应用程序中没有包含不同版本的angularangular-ui-bootstrapunderscore,因此不应多次下载。因此,实际上该文件在所有文件中都应该相同。

当我浏览已部署的应用程序时,我可以看到每个人都下载了2个捆绑的JS文件,但是下载的URL不同。哈希和路径都是不同的。因此,即使我的哈希值完全相同,我认为浏览器仍会将所有这些哈希值视为唯一文件。

家庭应用程序:

https://my-domain.io/vendor.bundle.js?9a6814b4e4dbb0feaa27

https://my-domain.io/app.bundle.js?9a6814b4e4dbb0feaa27

Workbench应用程序:

https://my-domain.io/episode-workbench/vendor.bundle.js?db6fb9736eaae45f9272

https://my-domain.io/episode-workbench/app.bundle.js?db6fb9736eaae45f9272

用户管理应用程序:

https://my-domain.io/user-management/vendor.bundle.js?1762ff3f728bb14fc632

https://my-domain.io/user-management/app.bundle.js?1762ff3f728bb14fc632

那么我将如何让这三个应用程序全部使用相同的vendor.bundle.js文件,以便用户不会为浏览的每个应用程序下载相同的文件?

0 个答案:

没有答案