星点互联edus视频培训演示站

标题: 通过webpack DllPlugin打包出来的js如何按需加载、懒加载？ [打印本页]

作者: small团团子 时间: 2020-11-28 10:05
标题: 通过webpack DllPlugin打包出来的js如何按需加载、懒加载？

项目中用到了一个第三方依赖，体积在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也不被加载。

欢迎光临星点互联edus视频培训演示站 (http://47.100.112.22/demo/edus/)