webpack 动态导入

webpack 动态导入

require.ensure（vue-router 配置路由，使用 webpack 的 require.ensure 技术，也可以实现按需加载。

vue 异步组件技术

component: (resolve) => require(["../components/PromiseDemo"], resolve);

es 提案的 import()

const Home = () =>
  import(/* webpackChunkName: 'ImportFuncDemo' */ "@/components/home");

魔法注释

默认通过动态导入产生的 bundle 文件，它的 name 就是一个序号，这并没有什么不好，因为大多数时候，在生产环境中我们根本不用关心资源文件的名称。

但是如果你还是需要给这些 bundle 命名的话，就可以使用 Webpack 所特有的魔法注释去实现。

webpack

component: (r) =>
  require.ensure([], () => r(require("@/components/home")), "demo");