代碼分割與懶加載情況下（code-splitting+lazyload）如何抽離公用模塊代碼？

如問題所示，存在兩個(gè)使用了webpack code-splitting 和 懶加載的路由文件，路由文件都使用了公用的public.js模塊。
// page/index/Index.vue 首頁路由文件

<template>首頁</template>
<script>
    import pub from 'script/public'
    ...
</script>

// 用戶頁
// page/index/Index.vue 用戶頁路由文件

<template>用戶頁</template>
<script>
    import pub from 'script/public'
    ...
</script>

要將 public.js公用模塊抽離，有兩種解決方案

方案一，CommonsChunkPlugin 具名模塊

手動(dòng)將所有共用的模塊抽離在一個(gè)文件。
創(chuàng)建文件commons.js

// commons.js
import pub from 'public'

在webpack.config.js的CommonsChunkPlugin插件指定commons 的entry

// webpack.config.js
entry：{
    main: 'src/main.js',
    commons: 'src/commons.js'
},
...
    new webpack.optimize.CommonsChunkPlugin({
        name: "commons",   // 和 entry的commons對(duì)應(yīng)，
        filename: 'common.bundle.js', // 抽離公共文件
        minChunks: Infinity,
    })

這樣，如果路由文件或其他模塊使用到了 commons.js中的模塊，都不會(huì)重復(fù)加載代碼，而是在common.bundle.js中獲取。

方案二，CommonsChunkPlugin 設(shè)置 children 屬性

官方文檔CommonsChunkPlugin 中 children屬性解釋

Move common modules into the parent chunk

With Code Splitting, multiple child chunks of an entry chunk can have common dependencies. To prevent duplication these can be moved into the parent. This reduces overall size, but does have a negative effect on the initial load time. If it is expected that users will need to download many sibling chunks, i.e. children of the entry chunk, then this should improve load time overall.

可知，設(shè)置 children 為 true 可以將code-splitting的模塊的依賴模塊抽離到父模塊，這樣做的后果就是，確實(shí)抽離公用模塊，降低了代碼重復(fù)，減少了代碼體積。但是同時(shí)，抽離到父模塊，也意味著如果有一個(gè)懶加載的路由 ShopList.vue 沒有用到public.js 模塊，但是實(shí)際上引入了父模塊，也為這ShopList.vue也引入了public.js的代碼。

這就需要CommonsChunkPlugin的 async 屬性。

方案三(最佳實(shí)踐)，children 與 async 雙管齊下

Extra async commons chunk

Similar to the above one, but instead of moving common modules into the parent (which increases initial load time) a new async-loaded additional commons chunk is used. This is automatically downloaded in parallel when the additional chunk is downloaded.

設(shè)置了async, 會(huì)將上述懶加載的路由文件公用的模塊代碼，抽離打包成一個(gè)單獨(dú)的文件，并且該文件是按需加載的，如果某個(gè)路由沒有使用到這些公用模塊，是不會(huì)加載進(jìn)來的。

舉個(gè)例子：
首頁路由模塊（訪問路徑/index）,引用了 public模塊
用戶路由模塊（訪問路徑/user）,引用了 public模塊
購物車模塊（訪問路徑/shop），沒有引用 public模塊

那么，打包生成的文件大概是

main.js - 根入口文件
index.js - 首頁路由文件
user.js - 用戶路由文件
shop.js - 購物車路由文件
0.js - 抽離路由的公用模塊文件

訪問url/index，加載的依賴文件是main.js + index.js + 0.js
訪問url/user，加載的依賴文件是main.js + user.js + 0.js
訪問url/shop，加載的依賴文件是main.js + shop.js
基本解決了 lazy load + code-splitting 情況下的公用模塊抽離。

以下附上簡(jiǎn)單的webpack.config.js配置代碼

entry: {
    main: './src/main.js'
},
...
plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
        name: "main",
        minChunks: 2,
        children: true,
        // deepChildren: true,
        async: true,
    })
]

參考資料

commons-chunk-plugin
CommonChunkPlugin: Feature - Select statically imported modules from chunks that were created from a dynamic import (require.ensure / System.import / import(".."))

標(biāo)準(zhǔn)的做法不敢說,但是有一個(gè)解決方法,就是把你的公共模塊當(dāng)成 vue 插件注進(jìn)去
假設(shè)注入成這樣

 Vue.prototype.$test= {test1: () => console.log(1), test2: () => console.log(2)}

然后你就可以在任意地方用 this.$test.test1() this.$test.test2() 使用

這樣最后每個(gè)單獨(dú)的文件不會(huì)包括上面的公用方法,公用方法會(huì)被扔到那個(gè)全局 app.js里面

補(bǔ)充疑問

假設(shè)入口文件如下

打包生成的文件

這么做 vendor.**.js 一般是不會(huì)變的,如果按你后來的解決方案,懶加載路由使用的公用的文件是重新生成一個(gè)新文件還是補(bǔ)充到這個(gè)文件?如果是改變這個(gè)文件的話,我覺得不值得

因?yàn)樽约簩懙霉妙悗焓菚?huì)變的,每次都變動(dòng)加話,代價(jià)太大

繼續(xù)補(bǔ)充

新文檔看到了 children 跟 async 一起用是生成新的文件是吧,有機(jī)會(huì)試下