>[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》