webpack 性能优化 DLL 才硬核（webpack怎么做性能优化）
cac55 2024-10-07 06:43 57 浏览 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
相关推荐
- Mac电脑强制删除任何软件方法-含自启动应用
-
对于打工者来说，进入企业上班使用的电脑大概率是会被监控起来，比如各种流行的数据防泄漏DLP，奇安信天擎，甚至360安全卫士，这些安全软件你想卸载是非常困难的，甚至卸载后它自己又安装回来了，并且还在你不...
- Linux基础知识 | 文件与目录大全讲解
-
1.linux文件权限与目录配置1.文件属性Linux一般将文件可存取的身份分为三个类别，分别是owner/group/others，且三种身份各read/write/execute等权限文...
- 文件保护不妥协:2025 年 10 款顶级加密工具推荐
-
数据安全无小事，2025年这10款加密工具凭借独特功能脱颖而出，从个人到企业场景全覆盖，第一款为Ping32，其余为国外英文软件。1.Ping32企业级加密核心工具，支持200+文件格...
- 省心省力 一个软件搞定系统维护_省心安装在哪里能找到
-
◆系统类似于我们居住的房间，需要经常打理才能保持清洁、高效。虽然它本身也自带一些清理和优化的工具，但借助于好用的第三方工具来执行这方面的任务，会更让人省心省力。下面笔者就为大家介绍一款集多项功能于一身...
- JAVA程序员常用的几个工具类_java程序员一般用什么软件写程序
-
好的工具做起事来常常事半功倍，下面介绍几个开发中常用到的工具类，收藏一下，也许后面真的会用到。字符串处理：org.apache.commons.lang.StringUtilsisBlank(Char...
- 手工解决Windows10的若干难题_windows10系统卡顿怎么解决
-
【电脑报在线】很多朋友已经开始使用Win10，估计还只是测试版本的原因，使用过程中难免会出现一些问题，这里介绍解决一些解决难题的技巧。技巧1：让ProjectSpartan“重归正途”从10074...
- System32文件夹千万不能删除，看完这篇你就知道为什么了
-
C:\Windows\System32目录是Windows操作系统的关键部分，重要的系统文件存储在该目录中。网上的一些恶作剧者可能会告诉你删除它，但你不应该尝试去操作，如果你尝试的话，我们会告诉你会发...
- Windows.old 文件夹:系统备份的解析与安全删除指南
-
Windows.old是Windows系统升级（如Win10升Win11）或重装时，系统自动在C盘创建的备份文件夹，其核心作用是保留旧系统的文件、程序与配置，为“回退旧系统”提供保...
- 遇到疑难杂症?Windows 10回收站问题巧解决
-
回收站是Windows10的一个重要组件。然而，我们在使用过程中，可能会遇到一些问题。例如，不论回收站里有没有文件，都显示同一个图标，让人无法判别回收站的空和满的真实情况；没有了像Windows7...
- 卸载软件怎么彻底删掉?简单几个步骤彻底卸载，电脑小白看过来
-
日常工作学习生活中，我们需要在安装一些软件程序，但随着软件的更新迭代速度，很多时候我们需要重新下载安装新的程序，这时就需要将旧的一些软件程序进行卸载。但是卸载软件虽然很简单，但是很多小伙伴们表示卸载不...
- 用不上就删!如何完全卸载OneDrive?
-
作为Windows10自带的云盘，OneDrive为资料的自动备份和同步提供了方便。然而，从隐私或其他方面考虑，有些人不愿意使用OneDrive。但Windows10本身不提供直接卸载OneDri...
- 【Linux知识】Linux下快速删除大量文件/文件夹方法
-
在Linux下，如果需要快速删除大量文件或文件夹，可以使用如下方法：使用rm命令删除文件：可以使用rm命令删除文件，例如：rm-rf/path/to/directory/*这个命令会递...
- 清理系统不用第三方工具_清理系统垃圾用什么软件
-
清理优化系统一定要借助于优化工具吗？其实，手动优化系统也没有那么神秘，掌握了方法和技巧，系统清理也是一件简单和随心的事。一方面要为每一个可能产生累赘的文件找到清理的方法，另一方面要寻找能够提高工作效率...
- 系统小技巧:软件卸载不了?这里办法多
-
在正常情况下，我们都是通过软件程序组中的卸载图标，或利用控制面板中的“程序和功能”模块来卸载软件的。但有时，我们也会发现利用卸载图标无法卸载软件或者卸载图标干脆丢失找不到了，甚至控制面板中卸载软件的功...
- 麒麟系统无法删除文件夹_麒麟系统删除文件权限不够
-
删除文件夹方法例：sudorm-rf文件夹名称。删除文件方法例：sudorm-r文件名包括扩展名。如果没有权限，给文件夹加一下权限再删。加最高权限chmod775文件名加可执行权限...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (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)