代码分割与懒加载情况下（code-splitting+lazyload）如何抽离公用模块代码？

Question

问题背景

我知道，通过CommonsChunkPlugin 可以将 entry 的入口文件中引用多次的文件抽离打包成一个公用文件，从而减少代码重复冗余

    entry: {
        main: './src/main.js',
        user: './src/user.js'
    },
    ......
    new webpack.optimize.CommonsChunkPlugin({
        name: "commons",
        filename: 'common.js',
        minChunks: 2,
    })
    
    // 打包生成一个文件common.js ,包含main.js 和 user.js 中引用两次及以上的模块代码

那么当我使用了 vue-router 代码分割 懒加载的时候，每个路由对应的.vue文件中，共同引用了多次的模块，怎么自动抽离出来。

问题描述

懒加载路由文件

const
    Index = () => import(/* webpackChunkName: "index" */ "page/index/Index.vue"),
    User = () => import(/* webpackChunkName: "userIndex" */ "page/user/Index.vue"),
    UserDetail = () => import(/* webpackChunkName: "userDetail" */ "page/user/Detail.vue"),
    ...

// 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>

上述使用了vue-router懒加载打包出来的 首页路由文件index.js 和 用户页文件userIndex.js 都会包含一份 public.js的代码，重复了。

我的问题就是，在代码分割的代码中，怎么自动抽离公共代码？ 就像CommonsChunkPlugin的效果一样，或者说CommonsChunkPlugin怎么在 code-splitting 的场景上使用？

Answer 1

如问题所示，存在两个使用了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 具名模块

手动将所有共用的模块抽离在一个文件。
创建文件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对应，
        filename: 'common.bundle.js', // 抽离公共文件
        minChunks: Infinity,
    })

这样，如果路由文件或其他模块使用到了 commons.js中的模块，都不会重复加载代码，而是在common.bundle.js中获取。

方案二，CommonsChunkPlugin 设置 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.

可知，设置 children 为 true 可以将code-splitting的模块的依赖模块抽离到父模块，这样做的后果就是，确实抽离公用模块，降低了代码重复，减少了代码体积。但是同时，抽离到父模块，也意味着如果有一个懒加载的路由 ShopList.vue 没有用到public.js 模块，但是实际上引入了父模块，也为这ShopList.vue也引入了public.js的代码。

这就需要CommonsChunkPlugin的 async 属性。

方案三(最佳实践)，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.

设置了async, 会将上述懒加载的路由文件公用的模块代码，抽离打包成一个单独的文件，并且该文件是按需加载的，如果某个路由没有使用到这些公用模块，是不会加载进来的。

举个例子：
首页路由模块（访问路径/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 情况下的公用模块抽离。

以下附上简单的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(".."))

Answer 2

标准的做法不敢说,但是有一个解决方法,就是把你的公共模块当成 vue 插件注进去
假设注入成这样

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

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

这样最后每个单独的文件不会包括上面的公用方法,公用方法会被扔到那个全局 app.js里面

补充疑问

假设入口文件如下

打包生成的文件

这么做 vendor.**.js 一般是不会变的,如果按你后来的解决方案,懒加载路由使用的公用的文件是重新生成一个新文件还是补充到这个文件?如果是改变这个文件的话,我觉得不值得

因为自己写得公用类库是会变的,每次都变动加话,代价太大

继续补充

新文档看到了 children 跟 async 一起用是生成新的文件是吧,有机会试下