Javascript 对于仅在多个页面上使用vue的项目，使用laravel mix拆分代码

我目前正在为一个项目进行前端优化，我一直在进行代码拆分

基本上，我试图实现的是拆分代码和供应商，并仅在需要时加载特定的代码和供应商

目前，我使用默认的混合设置，所有依赖项都导入到

app.js

。所以我需要在每个页面上都包含

app.js

，这是非常低效的，因为在我的项目中，大多数页面都不使用vue，我在一些使用vue的页面上使用了一些真正的大型vue插件

例如，假设我有两个页面：

/home

和

/orders

。与其在每个页面上加载

app.js

，我希望：

/home

（大多数页面看起来像这样）

• vendor.js

  ：jquery+bootstrap+jquery插件

• home.js

  ：初始化页面上的一些jquery插件（例如旋转木马）

/orders

• vendor.js

• vue.js

  ：我想提取vue，因为我有多个入口点

• order index.js

  ：注册特定于页面的vue组件并创建vue实例

如何使用laravel mix实现这一点？或者你们有更好的建议吗

---

谢谢

我假设laravel mix使用weback。使用weback，您可以定义不同的入口点并动态创建不同的输出。（看这里）。然后，您只需将vue脚本排入所需页面即可。@Mel Macaluso是的，laravel mix使用webpack。并且它支持多入口。问题更多的是关于供应商提取。我需要提取多个供应商，并根据需要包括选定的供应商。默认的laravel mix提取设置需要包括所有提取的文件，例如：

manifest.js

，

vendor1.js

，

vendor2.js

，

app.js

我假设laravel mix使用weback。使用weback，您可以定义不同的入口点并动态创建不同的输出。（看这里）。然后，您只需将vue脚本排入所需页面即可。@Mel Macaluso是的，laravel mix使用webpack。并且它支持多入口。问题更多的是关于供应商提取。我需要提取多个供应商，并根据需要包括选定的供应商。默认的laravel mix提取设置需要包括所有提取的文件，例如：

manifest.js

，

vendor1.js

，

vendor2.js

，

app.js

// order-index.js

Vue.component('order-index', require('./components/OrderIndex.vue'));

const app = new Vue({
  el: '#app'
});