返回顶部

[前端] 通过webpack DllPlugin打包出来的js如何按需加载、懒加载?

[复制链接]
small团团子 显示全部楼层 发表于 2020-11-28 10:05:54 |阅读模式 打印 上一主题 下一主题
未解决50
72 0
通过webpack DllPlugin打包出来的js如何按需加载、懒加载?
small团团子2020-11-28 10:05:54
项目中用到了一个第三方依赖,体积在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也不被加载。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

星点互联 成立于2014年8月,是目前国内优秀的开源技术社区,拥有超过300万会员,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作