通过webpack DllPlugin打包出来的js如何按需加载、懒加载？

Question

项目中用到了一个第三方依赖，体积在2MB左右，打包非常耗时，因此想用dll减小构建耗时。

首先通过DllPlugin构建出来若干manifest.json及js，
然后通过DllReferencePlugin引用manifest.json，
最后通过add-asset-html-webpack-plugin向生成的index.html中添加script标签。

希望DllPlugin生成的js中，有的js可以按需加载、懒加载。
在代码里无论是用import()还是require()都无法做到按需加载js，
我知道是因为add-asset-html-webpack-plugin将script标签写在了html里，js肯定会被加载，但是不添加script标签又引用不到这个依赖。

请问是否有方法可以按需加载dll类型的js文件？

我提供了一个demo，提取码：aq88

npm i
先跑npm run dll构建出dll之后，
再跑npm run build
然后部署dist目录

App.vue中使用import()懒加载了HelloWorld.vue
HelloWorld.vue中import()懒加载了lodash。
通过F12 network中看见，但是即使HelloWorld的js没有被记载，lodash也是在刚进入页面就立即被加载。

有没有什么方法，能达成一下效果：不加载HelloWrold时，lodash也不被加载。

Answer 1

https://webpack.js.org/plugin...

We recommend using DllPlugin only with entryOnly: true, otherwise tree shaking in the DLL won't work as all the exports might be used.

推荐DLLPlugin设定entryOnly:true 否则tree shaking不会被启用

Answer 2

使用splitChunks 分割单独打lodash这个包，然后在引用lodash里面的函数的时候使用require.ensure()就可以了。lodash不用打在dll里面

Answer 3

Dll应该解决不了你的问题，可以使用systemjs这样的库自己实现一个loader函数去控制