>[success] # 使用动态代码懒加载 ~~~ 1.懒加载webpack 提供了两种方案，分别是 2.1.CommonJS：require.ensure 2.2.ES6：动态 import（⽬前还没有原⽣⽀持，需要 babel 转换） ~~~ [关于两者更多使用参考官网](https://webpack.js.org/guides/code-splitting/#dynamic-imports) >[danger] ##### vue ~~~ 1.使用的是单页应用开发框架 Vue，在项目当中的路由映射组件就可以通过这种动态导入的的方式实现按需加载 2.也可以使用'Webpack 魔法注释（Magic Comments）',相同的 ChunkName 最终会被打包到一起 借助于这样一个特点，就可以根据实际情况灵活组织动态加载的模块所输出的文件了 3.下面案例由于他们注释起的名字一样最后会被打包在一起 ~~~ ~~~ if (hash === '#posts') { import(/* webpackChunkName: 'components' */'./posts/posts').then(({ default: posts }) => { mainElement.appendChild(posts()) }) } else if (hash === '#album') { import(/* webpackChunkName: 'components' */'./album/album').then(({ default: album }) => { mainElement.appendChild(album()) }) } } ~~~ >[danger] ##### 原理 [原理](https://juejin.im/post/6850418111599165448) >[danger] ##### 问答 出自 极客时间《玩转webpack》