webpack打包优化插件Dllplugin的使用

最新推荐文章于 2025-06-04 10:20:23 发布

祖传做年糕

最新推荐文章于 2025-06-04 10:20:23 发布

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： dllplugin 文章标签： vue

本文链接：https://blog.csdn.net/biraotian/article/details/117028239

本文介绍了DLL文件的原理以及在Vue项目中利用Webpack的Dllplugin进行构建优化的方法，通过分离常变动和不变动的第三方库，提高构建速度。详细讲述了Dllplugin的配置与使用步骤，包括DllReferencePlugin的引入，以及注意事项，如合理选择打包内容以避免增加文件大小和检查版本更新等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是DLL文件？
DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即DLL文件，放置于系统中。当我们执行某一个程序时，相应的DLL文件就会被调用。

为什么要在项目中使用Dll？
通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码。

Dllplugin的使用
使用dll时，可以把构建过程分成dll构建过程和主构建过程（实质也就是如此），所以需要两个构建配置文件，例如叫做webpack.config.js和webpack.dll.config.js。

使用DLLPlugin打包需要分离到动态库的模块
DllPlugin是webpack内置的插件，不需要额外安装，直接新增配置webpack.dll.config.js文件：

const path = require('path');
const webpack = require('webpack');
module.exports = {
   
   
    mode: "production",
    entry: {
   
   
        vendors: [
            'vue',
            'vuex',
            'vue-router',
            'view-design',
            'axios'
        ]
    },
    output: {
   
   
        filename: '[name].dll.js',
        path: path.resolve(__dirname, '../static/dll'),
        library: '[name]',
        clean: true
    },
    // 这个是输出映射表
    plugins: [
        new webpack.DllPlugin({
   
   
            path: path.join(__dirname, './[name].manifest.json'),
            name: '[name]',
            context: __dirname // 这里的上下文要和我们后面用的DllReferencePlugin的上下文一致。
        })
    ]
};

在package.json的scripts中增加：
“dll”: “npx webpack --config webpack.dll.conf.js”,

我们先来看看，这一步到底做了什么。执行：webpack --config webpack.dll.config，然后到指定的输出文件夹查看输出：
vendors.dll.js里是一个js对象，对象里面的key对应的就是下面文件里的id；
vendors.manifest.json文件里，是用来描述对应的dll文件里保存的模块
里暴露出刚刚构建的所有模块，如下：