vue項(xiàng)目實(shí)現(xiàn)按需加載的3種方式：vue異步組件、es提案的import()、webpack的req

X_AirDu 發(fā)布于2019-08-21 16:59 / 2793人閱讀

摘要：但是，這種情況下一個(gè)組件生成一個(gè)文件。提供的配置路由，使用的技術(shù)，也可以實(shí)現(xiàn)按需加載。這種情況下，多個(gè)路由指定相同的，會(huì)合并打包成一個(gè)文件。舉例如下詳細(xì)代碼在倉(cāng)庫(kù)項(xiàng)目路由配置文件

1. vue異步組件技術(shù)

vue-router配置路由，使用vue的異步組件技術(shù)，可以實(shí)現(xiàn)按需加載。

但是，這種情況下一個(gè)組件生成一個(gè)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行代碼，沒(méi)有指定webpackChunkName，每個(gè)組件打包成一個(gè)js文件。
const ImportFuncDemo1 = () => import("../components/ImportFuncDemo1")
const ImportFuncDemo2 = () => import("../components/ImportFuncDemo2")
// 下面2行代碼，指定了相同的webpackChunkName，會(huì)合并打包成一個(gè)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技術(shù)，也可以實(shí)現(xiàn)按需加載。

這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)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")
        }

詳細(xì)代碼在github倉(cāng)庫(kù)：https://github.com/cag2050/vu...

項(xiàng)目路由配置文件：https://github.com/cag2050/vu...