vue專案實現按需載入的3種方式:vue非同步元件、es提案的import()、webpack的require.ensure()
阿新 • • 發佈:2018-11-05
1. vue非同步元件技術
- vue-router配置路由,使用vue的非同步元件技術,可以實現按需載入。
但是,這種情況下一個元件生成一個js檔案。
舉例如下:
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}
2. es提案的import()
- 推薦使用這種方式(需要webpack > 2.4)
- webpack官方文件:webpack中使用import()
vue官方文件:路由懶載入(使用import())
- vue-router配置路由,程式碼如下:
// 下面2行程式碼,沒有指定webpackChunkName,每個元件打包成一個js檔案。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2') // 下面2行程式碼,指定了相同的webpackChunkName,會合並打包成一個js檔案。 // const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo') // const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2') export default new Router({ routes: [ { path: '/importfuncdemo1', name: 'ImportFuncDemo1', component: ImportFuncDemo1 }, { path: '/importfuncdemo2', name: 'ImportFuncDemo2', component: ImportFuncDemo2 } ] })
3. webpack提供的require.ensure()
- vue-router配置路由,使用webpack的require.ensure技術,也可以實現按需載入。
這種情況下,多個路由指定相同的chunkName,會合並打包成一個js檔案。
舉例如下:
{ path: '/promisedemo', name: 'PromiseDemo', component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo') }, { path: '/hello', name: 'Hello', // component: Hello component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo') }
- 詳細程式碼在github倉庫:https://github.com/cag2050/vu...
專案路由配置檔案:https://github.com/cag2050/vu...