使用 Webpack 2 延迟加载 Vue 组件 [英] Lazy Loading Vue Components with Webpack 2
问题描述
我希望尝试使用 webpack 进行延迟加载.我按路线拆分我的应用程序，每个路线都有必需的组件:
I am looking to try lazy loading with webpack. I split my app by routes, and every route has required component:
const Home = resolve => {
require.ensure([ "../components/Home/Home.vue" ], () => {
resolve(require("../components/Home/Home.vue"));
});
};
每次我去不同的路线时，我都会把我的块放在不同的文件夹中:bundle1.js, bundle2.js, bundle3.js 为路由中的每个组件启用.
I got my chunks in separate folders every time I go to different route:
bundle1.js, bundle2.js, bundle3.js an on for every component in routes.
现在我不知道如何只加载该路线所需的包?如果我将 bundle.js 放在 index.html 中，它将加载整个包，但我只想加载该路由所需的唯一包?
Now I don't know how can I load only bundle I need for that route? If I put bundle.js in index.html it will load the whole bundle, but I just want to load the only bundle that I need for that route?
<body>
<div id="app"></div>
<!-- how to auto inject build files here?? -->
</body>
有部分用于 Vue 组件的延迟加载.我这样做了，我得到了大块的捆绑文件.但我不知道包含和加载它们的正确方法是什么.
There is section for Lazy Loading for Vue components. I did that and I get chunks of bundle files. But I don't know what is proper way to include them and load it.
感谢任何帮助.谢谢
推荐答案
您可以在此处找到有关如何实施的文档:
You can find a documentation about how to implement that here:
- https://router.vuejs.org/en/advanced/lazy-loading.html
- https://vuejs.org/v2/guide/components.html#Async 组件
这篇关于使用 Webpack 2 延迟加载 Vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
