首先场景如下：
- 构建一个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组件的懒加载。
网友评论