使用 Webpack 2 延迟加载 Vue 组件
Posted
技术标签:
【中文标题】使用 Webpack 2 延迟加载 Vue 组件【英文标题】：Lazy Loading Vue Components with Webpack 2 【发布时间】：2017-07-10 04:15:18 【问题描述】：我希望通过webpack 尝试延迟加载。我按路线拆分我的应用程序，每条路线都有所需的组件：
const Home = resolve =>
require.ensure([ "../components/Home/Home.vue" ], () =>
resolve(require("../components/Home/Home.vue"));
);
;
每次我去不同的路线时，我都会将我的块放在不同的文件夹中：
bundle1.js, bundle2.js, bundle3.js 为路由中的每个组件启用。
现在我不知道如何仅加载该路线所需的捆绑包？如果我将 bundle.js 放在 index.html 中，它将加载整个包，但我只想加载该路由所需的唯一包？
<body>
<div id="app"></div>
<!-- how to auto inject build files here?? -->
</body>
对于 Vue 组件有 Lazy Loading 部分。我这样做了，我得到了大块的捆绑文件。 但我不知道包含并加载它们的正确方法是什么。
感谢任何帮助。谢谢
【问题讨论】：
你在使用 vue-cli 和 webpack 吗？ 不，我想自己设置项目。 【参考方案1】：您可以在此处找到有关如何实现该功能的文档：
-
https://router.vuejs.org/en/advanced/lazy-loading.html
https://vuejs.org/v2/guide/components.html#Async-Components
【讨论】：
用户知道在哪里可以找到所述文档，他们确实引用了您的链接之一。【参考方案2】：我们可以轻松实现延迟加载，这要归功于即将推出的 javascript 功能，即 webpack 支持的动态导入。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
function loadView(view)
return () => import(/* webpackChunkName: "view-[request]" */ `@/views/$view.vue`)
export default new Router(
routes: [
path: '/',
name: 'home',
component: loadView('Home')
,
path: '/about',
name: 'about',
component: loadView('About')
]
)
当然这个答案来自this article，我建议你阅读它。
【讨论】：
以上是关于使用 Webpack 2 延迟加载 Vue 组件的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 vue-class-component 使用 Vue Router 延迟加载？
无法从嵌套组件中的资产文件夹加载图像（Vue.js 2.0 / Webpack）