vue項目實現按需加載的3種方式：vue異步組件、es提案的import()、webpack的require.ensure()

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配置路由，代碼以下：

const notFound = () => import(/* webpackChunkName: "index" */ '@views/common/404')
const login = () => import(/* webpackChunkName: "index" */ '@views/common/login')
const register = () => import(/* webpackChunkName: "index" */ '@views/common/register')
const main = () => import(/* webpackChunkName: "index" */ '@views/main')
const myWorks = () => import(/* webpackChunkName: "my" */ '@views/my/index')
const myAccountSetting = () => import(/* webpackChunkName: "my" */ '@views/my/account-setting')
const makeIndex = () => import(/* webpackChunkName: "make" */ '@views/make/index')

 

3. webpack提供的require.ensure()

在webpack 2的官網上寫了這麼一句話：

              require.ensure() is specific to webpack and superseded by import().

    因此，在webpack 2裏面應該是不建議使用require.ensure()這個方法的。可是目前該方法仍然有效，因此能夠簡單介紹一下。包括在webpack 1中也是能夠使用。下面是require.ensure()的語法：

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
 require.ensure（）接受三個參數：

第一個參數的依賴關係是一個數組，表明了當前須要進來的模塊的一些依賴; 
第二個參數回調就是一個回調函數其中須要注意的是，這個回調函數有一個參數要求，經過這個要求就能夠在回調函數內動態引入其餘模塊值得注意的是，雖然這個要求是回調函數的參數，理論上能夠換其餘名稱，可是其實是不能換的，不然的的的的WebPack就沒法靜態分析的時候處理它; 
第三個參數errorCallback比較好理解，就是處理錯誤的回調; 
第四個參數chunkName則是指定打包的組塊名稱。

• vue-router配置路由，使用webpack的require.ensure技術，也能夠實現按需加載。

這種狀況下，多個路由指定相同的chunkName，會合並打包成一個js文件。
舉例以下：

const notFound = r => require.ensure([], () => r(require('@views/common/404')), 'index')
const login = r => require.ensure([], () => r(require('@views/common/login')), 'index')
const register = r => require.ensure([], () => r(require('@views/common/register')), 'index')
const main = r => require.ensure([], () => r(require('@views/main')), 'index')
const myWorks = r => require.ensure([], () => r(require('@views/my/index')), 'my')
const myAccountSetting = r => require.ensure([], () => r(require('@views/my/account-setting')), 'my')
const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')

 

 

 

https://blog.csdn.net/jacktesla/article/details/80796775       vue項目實現按需加載的3種方式：vue異步組件、es提案的import()、webpack的require.ensure()

https://blog.csdn.net/sma2mmm/article/details/83827813   require.ensure()和import() 使用區分