以一个vue全家桶为例 entry: { vendor: [ ‘vue/dist/vue.esm.js’, ‘vue-router’, ‘vuex’ ] }图1为在生产环境中未使用DllPlugin生成的chunk.js文件图2为在生产环境中使用DllPlugin生成的.dll.js文件图3为在开发环境中未使用DllPlugin生成的.esm运行时文件可以看到,三个文件中都有isUnknownElement这个方法,这说明使用DllPlugin生成的.dll.js文件的内容既为.esm运行时文件的内容(另外这里的.esm运行时文件相当于一个polyfill,内置了一些方法,用于解析webpack编译vue后生成的.js、.css等文件)在生产环境下,当不使用DllPlugin时,每次编译都会把.esm运行时文件编译到chunk.js中。使用DllPlugin后,只要在index.html中主入口文件前加载这个dll.js文件,就能拿到esm运行时文件的内容,省去了每次编译vue全家桶的时间<!DOCTYPE html><html lang=“en”> <head> <meta charset=“utf-8”> <title>dll-test</title> </head> <body> <div id=“app”></div> <script src="./static/js/vendor.dll.js"></script> <script src="./main.js"></script> </body></html>使用场景: 1.对于像vue,react全家桶这样组合,推荐使用DllPlugin。因为这些框架普遍比较大,而且经常需要组合在一起使用。使用DllPlugin在时间上会有比较不错的收益2.对于lodash、jquery这样的第三方库,不推荐使用DllPlugin。jquery推荐使用ProvidePlugin。lodash通过es6 import语法导入,并配置untils选项可以实现按需加载