webpack 性能优化 DLL 才硬核（webpack怎么做性能优化）
cac55 2024-10-07 06:43 62 浏览 0 评论
作者：Lefex
转发链接：https://mp.weixin.qq.com/s/GiPfo5lgxkES4je_gNuNyQ
前言
最近学习 webpack，越发觉得这家伙学习成本真大，代码量也非常多，这还有非常多的第三方代码支持下，webpack 的生态才能运行下去。为长久考虑，这阶段我尽量去学习 webpack 「最本质的东西」，不是仅仅学习「如何使用」，而是「如何实现」，这样会起到「事半功倍」的效果。
如果你的项目代码量很大，这家伙的构建速度会非常慢，不得不进行性能优化。性能优化的核心是「能缓存就缓存，多线程加持，编译越少的文件越好，使用性能好的机器」。
今天的主要内容是学习 DDL（Dynamic Link Library），动态链接库，这种技术对移动端来说基本上是小儿科，其核心思想是「把代码变成另外一种形态，可直接拿来使用」。对于前端来说，动态库适合那些经常不会修改的代码库，比如我们使用的第三方库可以先通过 webpack 打包成动态库，以后就不用打包了，直接拿来使用就行。
我举个例子，这个过程就像我们生产苹果手机一样，各个现成的零件就像动态库一样，他们是提前生产出来，最终把这些动态库组装到一起，就组成了一部手机。
下面我们实现一个项目，项目里使用了 vue 和 jquery，他俩属于那种「千年不变」的代码。我新建了一个项目，结构如下：
objUtils.js 中使用了 jquery；
home 是使用 vue 实现的一个页面；
webpack 本身内置了 DLL，通过下面两个插件来实现动态库：
1、DLLPlugin - 动态库的生产者
用于打包单独的动态库文件，也就是它能够把某些文件编译成动态库；打包动态库和打包普通的项目一样，也需要提供一个配置文件，素燕建的文件是 webpack.dll.config.js，内容如下：
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
// 把 jquery 个 vue 打包成动态库
entry: {
jquery_dll: ['jquery'],
vue_dll: ['vue']
},
output: {
// 打包后的文件名
// [name]为 entry 里的名字(jquery_dll, vue_dll)
filename: '[name].js',
// 路径为 dll
path: resolve(__dirname, 'dll'),
// 打包库里向外暴露的的名字是什么
// var jquery_b1c94c9f341c95430389
library: '[name]_[hash]'
},
plugins: [
// 生成 manifest 文件
new webpack.DllPlugin({
name: '[name]_[hash]',
path: resolve(__dirname, 'dll/[name].manifest.json')
})
],
mode: 'production'
}这个配置文件核心做了 3 件事：
1> 告诉 webpack 要把那些文件打包成 dll；
2> 把打包后的 dll 放到哪里，文件名是什么，使用的名字是什么；
3> 生成 manifest 文件
我们在 package.json 中添加打包 dll 的命令
"scripts": {
"build": "webpack --config webpack.config.js",
"build:profile": "webpack --config webpack.config.js --profile",
"build:dll": "webpack --config webpack.dll.config.js"
},开始打包 npm run build:dll：
此时会在项目根目录下生成一个 dll 文件夹：
2、DLLReferencePlugin - 动态库的使用者
动态库打包好了，webpack 进行项目整体打包的时候，要告诉它，“哎，jquery 和 vue 已经打包好了，你直接用就行”。所以 webpack.config.js 的 DLL 配置核心是要告诉它哪些文件不需要进行打包。
大伙请看 plugins 中的配置：
plugins: [
new HtmlWebpackPlugin({
template: './home/index.html'
}),
// vue-loader 目前需要 VueLoaderPlugin，不然会报错
// 直接创建了 VueLoaderPlugin 实例
new VueLoaderPlugin(),
// DLL
// jquery 不参与打包
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/jquery_dll.manifest.json')
}),
// vue 不参与打包
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/vue_dll.manifest.json')
}),
// 在 HTML 中添加动态库 jquery_dll.js
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, 'dll/jquery_dll.js')
}),
// 在 HTML 中添加动态库 vue_dll.js
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, 'dll/vue_dll.js')
}),
]HtmlWebpackPlugin 这个我们在 使用 webpack 动态生成 html 讲过，动态生成 HTML 的。
webpack.DllReferencePlugin 引用的文件是 manifest 文件，打包动态库时生成的，告诉 webpack 这些文件不需要打包，直接用就行。
动态库需要我们把它添加到 HTML 中才会被加载，不能手动直接在 HTML 中加吧，会+被人笑话的。可以使用插件 AddAssetHtmlWebpackPlugin 来添加。
那开始打包吧，执行 npm run build:
打开 dist/ index.html，内容如下，动态库自动被添加：
<body>
<div id="app"></div>
<script src="vue_dll.js"></script>
<script src="jquery_dll.js"></script>
<script src="build.js"></script>
</body>多说无益，直接看 demo 吧。
https://github.com/lefex/FE/tree/master/webpack/dll
回过头总结一下：
DLL 就是提前生成一个打包好的库，webpack 在打包的时候忽略动态库，但使用动态库的时候需要「手动或自动」把它加到 HTML 中，这样动态库才能生效。这个过程需要依赖配置文件 manifest 配置文件。
不知道我有没有把 DLL 说明白，给个反馈，留言告诉我。
大家加油！
作者：Lefex
转发链接：https://mp.weixin.qq.com/s/GiPfo5lgxkES4je_gNuNyQ
相关推荐
- 这些端口关闭后，系统会更安全!系统高危端口及其关闭方法?
-
在这高速发展的网络信息时代，信息安全显得非常重要，病毒、木马、非法侵入等安全事件经常发生。在我们使用电脑过程中，为了确保系统安全，以下高危端口必须关闭，防患于未然。一.Windows系统的445端口...
- 什么是安全组_什么是安全组件
-
安全组是一种虚拟防火墙，具备状态检测和数据包过滤功能，用于在云计算环境中设置网络访问控制，保护云服务器（ECS实例）、负载均衡、云数据库等资源。核心特性：虚拟防火墙：安全组控制云资源的出入站流量，决定...
- 针对单个网站的渗透思路(精)_网站渗透步骤
-
欢迎搜索公众号：白帽子左一每天分享更多黑客技能，工具及体系化视频教程（免费领首先，当我们拿到一个网站的域名或者IP的时候。最先要做的是信息收集。下面着重介绍一下信息收集模块一、信息收集——端口扫描与分...
- 风险突出的高危端口汇总 一网打尽 !
-
高危端口一直是攻击者关注的焦点，了解这些端口的风险、攻击方式及防护策略至关重要。一、文件传输类端口1.TCP20/21：FTP服务端口FTP（文件传输协议）用于文件的上传和下载。其明文传输特性使得...
- 指定IP地址进行远程访问服务器设置方法(windows系统)
-
我们有很多服务器经常受到外界网络的干扰，入侵者们通过扫描3389端口爆破密码非法进入我们的服务器，这时，我们可以配置服务器IP安全策略来限制一些IP访问，大大提高了服务器的安全。实验环境：服务端：...
- 服务器被黑，如何查找入侵、攻击痕迹呢?
-
本文出自头条号老王谈运维，转载请说明出处。引言：随着网络的越来越普及，使用的越来越频繁，木马病毒也随之侵入进来并且肆无忌惮。如何将病毒拒之门外，已成为我们普通大众必须具备的一项技能。这样，你才能使木马...
- win10 telnet命令怎么查看端口是否打开
-
可能大家也会遇到这个问题，win10telnet命令查看端口是否打开的步骤是什么？具体方法如下：1、键盘输入快捷键WIN+R，打开运行窗口。2、输入cmd，点击确定按钮。3、弹出cmd命令行窗...
- Crysis勒索病毒针对政企服务器攻击升级 腾讯安全展开全面防御
-
近日，腾讯安全御见威胁情报中心监测发现，Crysis勒索病毒在国内传播升级，感染数量呈上升趋势，该病毒主要通过RDP弱口令爆破传播入侵政企机构，加密重要数据，由于该病毒的加密破坏暂无法解密，被攻击后将...
- Windows端口详解，这几个端口不能开!
-
一、血泪警告这7个端口开着电脑秒变公共厕所445端口：勒索病毒专用通道永恒之蓝病毒最爱突破口，文件共享功能成致命漏洞。企业内网还敢用用，个人电脑开着就是作死135-139端口：网络邻居成内鬼，Wind...
- 网络通讯笔记_网络通讯笔记怎么写
-
网络通讯一、NIC（网卡）二、CMD命令提示符三、服务、协议与端口常见的计算机服务常见的计算机端口与协议四、DOS命令1、基本DOS命令五、地址一、NIC（网卡）网络接口控制器又叫网络适配器也就是...
- 服务器远程端口是什么意思?什么是服务器远程端口?
-
什么是服务器远程端口？如图：IP冒号后面的数字这就是服务器的一个远程端口服务器远程端口是什么意思？服务器远程端口是服务器通信服务中的一个服务端窗口号码，取值范围是1-65535.一个服务器里面包含服务...
- 服务器节点到底是啥?看完这篇全明白，旧电脑也能派上大用场
-
不少朋友看了我用旧电脑改服务器节点的文章，后台都在问：“服务器节点到底能干啥？”其实这东西没那么神秘，今天用大白话讲讲，看完你就知道家里的旧设备藏着多大潜力。服务器节点：网络世界的“小工位”简单说...
- 广东通管局预警:勒索病毒威胁“关键信息基础设施”，应高度警惕
-
来源：澎湃新闻据广东省通信管理局网站消息，广东省通信管理局5月12日发布了《关于勒索病毒对关键信息基础设施威胁的预警通报》。通报称，5月7日，美国最大燃油运输管道商“科洛尼尔”（ColonialP...
- 80端口和443端口是什么?服务器端口干什么用的?
-
80和443端口是最常见的2个端口，都是提供网络WEB浏览服务所需要的端口，一台服务器通过不同的端口，提供不同的服务。80端口服务：HTTP（HyperTextTransportProtocol）...
- 从单日网络安全风险看当前网络安全状况
-
一、核心结论（从单日数据看全局风险）通过对2025年8月18日这一天的非法访问数据深度分析，可以清晰看到：网络环境中的安全威胁呈现高频次、多目标、全球化三大特征。单日4557次非法访问尝试，覆盖22、...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)