Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.9k views
in Technique[技术] by (71.8m points)

通过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也不被加载。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...