最近，Vue-CLI生成的单页应用程序需要配置为多页应用程序。整个项目都分为官方网站和控制台，并且控制台介绍了大量的第三台-party Plug -ins。插件没有在官方网站的开发中使用，并且在官方网站上仅使用parwindcss。因此，我希望通过配置多页面来实现代码的细分。官方网站保持轻量级，并仅加载必要的内容。Vue Vue-Router Axios等库和其他库，例如Ant-Design-Vue，不需要将它们加载到官方网站页面上。
当我认为我只需要配置VUE-CLI文档的Vue-CLI页面时，一切都会根据我的概念进行合理的分配，我发现这个想法太幼稚了。Veasta Core Vue生态库。但是，当包装完成后，预览官方网站页面时，我发现官方网站引用了块供应商，其中包含所有Node_modules中的第三方库。
不，您需要知道。官方网站面对潜在客户，用户没有耐心等待。WebPack的默认策略不再适用。因此，我们需要手动优化包装配置。
首先，让我们看一下所有第三方依赖关系
经过分析后，Vue Vue-Router Axios是一个真正的公共代码。因此，如果我可以将这三个依赖项打包到一个单独的供应商bas.js中；该控制台的其余部分被包装到供应商-Console.js中；其余的依赖项包装到块供应商中。
包装完成后
预览再次发现index.html仅加载了必要的模块和块供应商。
尽管以上代码实现了第三张库包装的分割，但仍有一个痛点：如果我或其他开发需要将新的第三方库（例如D3）添加到控制台，则需要修改上面的规则，否则D3将把Behe打包到块供应商中，并由官方网站代码介绍。
这太麻烦了，因为官方网站不需要引入第三方库，因此新添加的库通常需要将其包装到供应商 - 康斯列中。LET在以下优化
我们可以在package.json中动态地将依赖项动态划分。
在这种转变之后，
原始：https：//juejin.cn/post/7099285269634875405