vue專案實現按需載入的3種方式

vue-router配置路由，使用vue的非同步元件技術，可以實現按需載入。

但是，這種情況下乙個元件生成乙個js檔案。

舉例如下：

webpack官方文件：webpack中使用import()

vue官方文件：路由懶載入(使用import())

用例：

// 下面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(,
]})

vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需載入。

這種情況下，多個路由指定相同的chunkname，會合併打包成乙個js檔案。

舉例如下：

,

如果想要打包的檔案顯示特定的名字,那在webpack的配置檔案中把webpack.prod.conf.js檔案中的output

output: ,

參考: 

vue專案實現路由按需載入 懶載入 的3種方式

vue非同步元件技術 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下乙個元件生成乙個js檔案 vue非同步元件技術 元件懶載入方案二 路由懶載入 使用import 下面2行 沒有指定webpackchunkname，每個元件打包成乙個js檔案...

vue專案實現路由按需載入的3種方式

vue非同步元件技術 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下乙個元件生成乙個js檔案 vue非同步元件技術 元件懶載入方案二 路由懶載入 使用import 下面2行 沒有指定webpackchunkname，每個元件打包成乙個js檔案...

vue 路由 實現按需載入的3種方式

vue官方文件 路由懶載入 使用import vue router配置路由，如下 下面2行 沒有指定webpackchunkname，每個元件打包成乙個js檔案。const importfuncdemo1 import components importfuncdemo1 const importf...