webpack DLL打包优化：解决重复代码问题

"webpack dll打包重复问题优化的解决方案" 在使用webpack的DllPlugin进行代码拆分时，可能会遇到一个困扰：打包后的dll文件中包含了重复的代码，特别是在将不同类别的库分开打包成vue.dll.js、plugin.dll.js和lib.dll.js时。这种情况通常发生在vue生态包和vue插件包之间，因为它们可能共同依赖了相同的基础库，如vue本身。 优化的背景在于，为了满足内部CDN上传文件大小不超过500KB的限制，开发者选择使用webpack dll来拆分项目中的库。将库分为三类：vue生态包、vue插件包和第三方包，以便更好地管理文件大小。 问题在于，当使用单一的webpack.dll.conf.js配置文件，并通过entry字段指定多个入口时，虽然可以实现多入口打包，但仍然无法避免重复代码的问题。在这种情况下，尽管尝试了将webpack配置拆分为三个独立的配置文件，以期望每个dll包都有其特定的配置，但问题仍然存在。 解决这个问题的一种方法是利用webpack的Multi-Compiler特性。这意味着为每个dll包创建单独的webpack配置文件，确保每个配置只关注其特定的依赖。例如： ```javascript // webpack.vue.conf.js module.exports = { // 具体的vue生态包配置 entry: { vue: ['vue', 'vuex', 'vue-router'], }, plugins: [ new webpack.DllPlugin({ // vue.dll的配置 }), ], }; // webpack.plugin.conf.js module.exports = { // 具体的vue插件包配置 entry: { plugin: ['vee-validate', '内部UI库'], }, plugins: [ new webpack.DllPlugin({ // plugin.dll的配置 }), ], }; // webpack.lib.conf.js module.exports = { // 其他第三方库的配置 entry: { lib: ['axios', 'dayjs'], }, plugins: [ new webpack.DllPlugin({ // lib.dll的配置 }), ], }; ``` 通过这种方式，每个配置文件只关注自己的入口，从而减少重复代码的可能性。此外，还需要确保在生成的manifest.json文件中正确记录了每个dll包的依赖关系，以便在主应用的webpack配置中正确引用。 在实际操作中，还应确保在生产环境中使用production模式进行打包，因为production模式下webpack会进行更深入的优化，比如tree shaking，有助于减少不必要的代码。同时，可以结合使用MiniCssExtractPlugin来提取CSS，减少CSS的体积，进一步优化整体打包效果。 解决webpack dll打包重复问题的关键在于合理划分dll包的类别，使用独立的webpack配置文件，以及充分利用webpack的各种优化策略，如production模式和tree shaking。通过这些方法，可以有效地减少重复代码，满足CDN上传大小限制，提升项目的加载速度。