vue或webpack如何使得lib包内部的component支持懒加载

首先场景如下：

构建一个lib包，内含多个vue组件，父工程通过Vue.use方式进行全局引入
由于组件可能会很多很大，所以想实现这个lib包里面的组件实现懒加载
初步设想的是采用动态导入(dynamic imports)实现懒加载
（element-ui的按需加载方式好像是通过babel-component-plugin将未使用的component标记后，通过tree shaking优化掉的，所以不适合这里的懒加载）

lib包代码：

function install (Vue, options) {
  Vue.component('d2p-file-uploader', () =>import('./lib/file-uploader'))
  Vue.component('d2p-images-format', () =>import('./lib/images-format'))
}

打包出来是这个样子：

看上去还不错，成功按照懒加载的方式打成多个chunk了

image.png

但是，引用这个lib之后，报如下错误：

Uncaught SyntaxError: Unexpected token <
vue.runtime.esm.js:619 [Vue warn]: Failed to resolve async component: function(){return t.e(3).then(t.bind(null,"50bf"))}
Reason: ChunkLoadError: Loading chunk 3 failed.
(missing: http://localhost:8080/d2p-extends.umd.min.3.js)

为啥会报这个错呢：

仔细看上面的错误是懒加载50bf这段chunk的时候，d2p-extends.umd.min.3.js这个文件找不到
其实因为d2p-extends.umd.min.3.js这段js是在lib里面的，而引用它的父工程打包出来的js是这样的

image.png

lib包里面懒加载分离出来的chunk并没有按照原来的名字复制到父工程的dist/js目录下面
所以这种lib的打包方式并不能实现lib里面的component懒加载

然后baidu、google、Stack Overflow、github一通查：

最后在webpack的issue上查到了一些对于这个问题的讨论

https://github.com/webpack/webpack/issues/2471

该问题被标记为困难，16年问题就提出来了，18年1月关闭时候都没有解决，看来这个需求实现还是真的挺麻烦的

image.png

然后18年9月又被人打开了，至今未解决
https://github.com/webpack/webpack/issues/6818

image.png

所以结论是目前为止webpack暂时不支持lib里的动态导入方式的懒加载

但是Stack Overflow上提到了一个解决方案

https://stackoverflow.com/questions/54149892/webpack-cannot-resolve-node-modules-lazy-assets

image.png

简单来说，就是通过源码方式导入，而不是dist/xxx.umd.js导入。
这样就相当于把lib包放到父工程里面去重新打包，就跟你把lib包里面的源代码复制到你的父工程里面一样。（只是这样就要求父工程与lib的eslint配置要一致，可以通过设置忽略来解决）

所以抛弃dist通过src方式引入即可获得懒加载功能

1、方式一：lib包里面的package.json的main改成 'src/index'

{
"main": "src/index"
}

2、方式二：父工程import src目录

 import componentName from 'subLibName/src'

懒加载效果

项目地址：https://github.com/greper/d2-crud-plus
示例地址：http://qiniu.veryreader.com/D2CrudPlusExample/index.html#/form/uploader

lazyloading3.gif

最后几个附加题

1. 如果这个lib还想提供给那些不追求懒加载的人通过dist方式引用呢？

因为我们其实并没有解决dist引入时发生的ChunkLoadError: Loading chunk 3 failed错误
要解决这个问题，就是不让他打包成多个chunk
翻遍了vue-cli的文档，发现没有什么简单的方法关闭它。
然后去webpack去找，最后找到一个插件“LimitChunkCountPlugin”，它本是一个用来优化合并小chunk的插件，但是它有一个maxChunks参数，可以限制最大chunk数量，把它设置为1就可以实现不打包成多个chunk的目的了。

vue.config.js 中配置如下插件即可

const webpack = require('webpack')
const plugins = [new webpack.optimize.LimitChunkCountPlugin({
  maxChunks: 1,
  minChunkSize: 1000
})]
module.exports = {
  configureWebpack: {
    plugins: plugins
  }
}

2. 既然报的错误是懒加载的chunk下载不到，写个插件从lib里面把相关的chunk复制出来是不是也可以？

理论上确实可以，我试过手动从lib里面把chunk复制出来放到父工程打包后的/js/目录下，部署执行完全没有问题。
这个方式可以解决源码导入的缺陷（父工程与lib之间eslint配置要求一致的问题）
这样的插件写起来应该蛮简单。
但这样一来就要求父工程一定要配置这个自定义的复制插件，使得这个lib的应用受到一定的限制。

3. 更好的办法

更好的办法是将lib根据第1点打包成单个chunk，然后写个插件，父工程在build的时候通过这个插件将lib拆分，把懒加载的模块提取出来，写到新的chunk里面。
这种方式即不破坏lib的通用性，又实现了lib组件的懒加载。