38 webpack优化-动态链接库

最新推荐文章于 2022-08-06 10:16:24 发布

render-ydb

最新推荐文章于 2022-08-06 10:16:24 发布

阅读量373

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/sinat_41212418/article/details/121962019

版权

webpack 专栏收录该内容

57 篇文章 7 订阅

订阅专栏

动态链接库

动态链接库可以拆成动态链接和库，总的来说就是抽象出来的一个存放各种模块的动态链接的库。对于某些模块可能一段时间不会出现更新或者不会进行更新，使用这些模块的时候，每次构建都会出打包这些模块，导致构建性能降低。我们可以把这些稳定的模块提前打包好，然后给出一份链接的清单，在以后构建的时候，就去根据清单寻找对应的打包好的模块，避免每次都进行这些模块的打包，以此提升构建性能。

动态链接库抽象出来就是有一个专门的库存放这些打包好的模块，然后提供模块的链接，确保构建的时候能够找到对应的模块。

要实现动态链接，需要使用Webpack中内置的两个插件分别是DllPlugin和DllReferencePlugin。其中DllPlugin负责生成模块的动态链接，DllReferencePlugin负责根据DllPlugin生成的链接去寻找打包的模块。

以构建React动态链接库为例，新建webpack.dll.config.js：

const path = require("path");
const webpack = require("webpack");
module.exports = {
    entry: {
        // 将react相关的模块作为入口文件，进行动态链接
        react: ["react", "react-dom"]
    },
    output: {
        // 模块打包输出文件名称
        filename: "[name].dll.js",
        // 模块打包输出位置
        path: path.resolve(__dirname, "dist"),
        // 指定导出模块的名称
        library: "_dll_[name]"
    },
    plugins: [
        // 接入DllPlugin
        new webpack.DllPlugin({
            // 动态链接库全局变量名称，必须和library保持一致
            // 该值也是react.mainfest.json中的name值
            name: "_dll_[name]",
            // 动态链接库的清单文件，用于描述对应的dll.js文件包含哪些模块，以及模块的id和路径
            path: path.join(__dirname, "dist", "[name].manifest.json"),
        })
    ]
}

执行该构建，会把React和React-dom打包输出react.dll.js，该JavaScript文件中包含了大量模块的代码，这些模块被存放在一个数组中，用数组的索引作为id。同时会生成用于描述react.dll.js文件的react.manifest.json清单。这样子我们就构建好了一个react模块相关的动态链接库。

使用DllReferencePlugin可以使用我们构建出来的动态链接库，配置如下：

module.exports = {
    plugins: [
        new webpack.DllReferencePlugin({
            // 引入react对应的清单文件
            manifest: require("./dist/react.manifest.json")
        })
    ]
}

在这里引入了react.manifest.json,通过该清单文件的描述信息，Webpack构建的时候，在操作React相关模块部分的地方，就会使用动态链接库里面对应的文件，就不需要在把React和React-dom打包到输出文件中。由于React和React-dom不会在存在输出文件中，为了保证项目的正确运行，需要手动在index.html文件中引入react.dll.js文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 														initial-scale=1.0">
    <script src="../dist/react.dll.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

使用动态链接库以后，Webpack的构建性能会提升，输出文件大小会大大减少,提升了页面的加载速度。动态链接库生成以后，一般不需要再次执行链接库生成的操作（需要生成动态链接库的模块是相对稳定的），如果在后期业务中所使用的模块必须更换其他版本，在下载好对应版本的模块后，再次执行动态链接库构建即可。

值得注意的是，必须要先进行动态链接库的构建，在执行项目的构建。

本章节提供案例源码下载: https://gitee.com/mvc_ydb/webpack/blob/master/DllPlugin.zip

render-ydb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
38 webpack优化-动态链接库

动态链接库动态链接库可以拆成动态链接和库，总的来说就是抽象出来的一个存放各种模块的动态链接的库。对于某些模块可能一段时间不会出现更新或者不会进行更新，使用这些模块的时候，每次构建都会出打包这些模块，导致构建性能降低。我们可以把这些稳定的模块提前打包好，然后给出一份链接的清单，在以后构建的时候，就去根据清单寻找对应的打包好的模块，避免每次都进行这些模块的打包，以此提升构建性能。动态链接库抽象出来就是有一个专门的库存放这些打包好的模块，然后提供模块的链接，确保构建的时候能够找到对应的模块。要实现动态链接，
复制链接

扫一扫

专栏目录