使用 Webpack 2 延迟加载 Vue 组件

编程入门 行业动态 更新时间:2024-10-28 08:22:16
本文介绍了使用 Webpack 2 延迟加载 Vue 组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时送ChatGPT账号..

我希望尝试使用 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/en/advanced/lazy-loading.htmlhttps://vuejs/v2/guide/components.html#Async 组件

这篇关于使用 Webpack 2 延迟加载 Vue 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

更多推荐

[db:关键词]

本文发布于:2023-04-26 22:54:45,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1142871.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:组件   加载   Webpack   Vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!