详解Webpack DLL用法以及功能

　　

在使用webpack过程中,本人也发现发现构建速度非常慢,webpack性能优化的方式有很多种,本文介绍了dll, dll是一种最简单粗暴并且极其有效的优化方式。
　　

　　

<强>前言

　　

在用Webpack打包的时候,对于一些不经常更新的第三方库,比如<代码> ,<代码> lodash> 　　

    　　<李> CommonsChunkPlugin李 　　<李> DLLPlugin李 　　
　　

对于<代码> CommonsChunkPlugin> DLLPlugin> 　　

<强>用法

　　

要使用<代码> DLLPlugin> 　　

    　　<李> webpack.config.js李 　　<李> webpack.dll.config.js李 　　
　　

先来看下<代码> webpack.dll.config.js

　　 　　 　　const webpack=要求(“webpack”) 　　const图书馆='[名字]_lib ' 　　const path=要求(“路径”) 　　 　　模块。出口={ 　　条目:{ 　　供应商:[“反应”、“lodash”] 　　}， 　　 　　输出:{ 　　文件名:“[名字].dll.js”, 　　路径:“dist/? 　　图书馆 　　}， 　　 　　插件:[ 　　新webpack.DllPlugin ({ 　　路径:路径。加入(__dirname dist/[名字]-manifest.json),//这个必须匹配输出。图书馆上面选择 　　名称:图书馆 　　}), 　　]， 　　} 　　 　　之前 　　 　　

再改下webpack.config。js文件

　　 　　 　　const webpack=要求(“webpack”) 　　 　　模块。出口={ 　　条目:{ 　　应用:“。/src/指数” 　　}， 　　输出:{ 　　文件名:“app.bundle.js”, 　　路径:“dist/? 　　}， 　　插件:[ 　　新webpack.DllReferencePlugin ({ 　　背景:__dirname, 　　清单:要求(“。/dist/vendors-manifest.json”) 　　}) 　　] 　　} 　　 　　之前 　　 　　

<代码>清单:要求(“。/dist/vendors-manifest.json”) 这里的路径要和<代码> webpack.dll.config。js代码里面的对应。

　　

然后运行

　　 　　 　　webpack——配置webpack.dll.config.js美元 　　webpack美元——配置webpack.config.js 　　 　　

然后你的html文件像下面这样引用

　　 　　 　　& lt;脚本src=" https://www.yisu.com/dist/vendors.dll.js "祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/dist/app.bundle.js "祝辞& lt;/script> 　　 　　

<强>插件DLL链接

　　

上面的用法也存在一些不方便的地方,比如在<代码> webpack.config。js代码中要明确指出对应的<代码>清单。json代码文件。还有当DLL需要更新的时候,比如<代码> 反应升级了,或者加入新的第三方库,都需要手动像下面这样编译一次。

　　 　　 　　webpack美元——配置webpack.dll.config.js 　　 　　

因为上面这些问题,所以基于官方的DllReferencePlugin,我写了一个打包的插件,Dll链接插件。

　　

使用这个插件,只需要对<代码> webpack.config。js代码作下小小的改动

　　 　　 　　const webpack=要求(“webpack”) 　　const DllLinkPlugin=要求(“dll-link-webpack-plugin”) 　　 　　模块。出口={//? 　　插件:[ 　　新DllLinkPlugin ({ 　　配置:需要(“webpack.dll.config.js”) 　　}) 　　] 　　} 　　 　　之前 　　 　　

直接替换掉<代码> DllReferencePlugin> 　　 　　 　　webpack美元——配置webpack.config.js 　　 　　

上面的命令便会自动生成对应的供应商文件,需要更新的时候,也会自动更新。
　　

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

详解Webpack DLL用法以及功能