webpack 性能优化 DLL 才硬核（webpack怎么做性能优化）
cac55 2024-10-07 06:43 41 浏览 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
相关推荐
- 电工电路图中二极管、三极管的符号标识
-
1、二极管二极管是一种常用的具有一个PN结的半导体器件，它具有单向导电性，通过二极管的电流只能沿一个方向流动。二极管只有在所加的正向电压达到一定值后才能导通。在电工电路图中，二极管以专用的图形符号和电...
- 开关部件在电工电路中的符号标识
-
1、在电工电路中还常常绘制有具有专门含义的图形符号，认识这些符号对于快速和准确理解电路图十分必要。在识读电工电路的过程中，还常常会遇到各种各样的功能部件的图形符号，用于标识其所代表的物理部件，例如各种...
- 走过路过 别错过!整理最全电工电路各种元器件及辅料字母符号解析
-
走过路过别错过！整理最全电工电路各种元器件及辅料字母符号解析建议收藏备用起来以备不时之需！每天学习一点点就会有收获！...
- 熬夜吐血整理的电工电路的字母符号!及各种元器件实物图解符号!
-
熬夜吐血整理的电工电路的字母符号！及各种元器件实物图解符号！...
- 电气人士接好了!史上最全的电气符号介绍
-
有没有人像小编一样看到这样的图纸就犯晕啊？像这样的图纸对于电气人士来说应该不陌生吧，可是对于一些刚入行的，或者在电气行业却不是技术岗位的人来说，那与天书没什么区别。今天小编狠狠心，为大家搜集了一些关于...
- 新手工程师，这些电路图符号你都了解吗?
-
以下电路图符号大全，千万别弄错了噢~~更多行业信息可查阅快点PCB平台订阅号：eqpcb_cp。...
- 电工学习通(一):电路图符号知识大全(安科瑞任心怡、许玉龙)
-
电路图符号知识我们常说的电路图呢是一种以物理电学标准符号来绘制各MOS管电子元器件组成和关系的电路原理布局图，听不懂也没关系，我们只要记住以下几点就可以了：电路图符号数量众多，大致可以分为四个类别：传...
- 常用电子元器件电路符号及实物外形图，你值得拥有
-
作为一名电工初学者，认识并了解常用的电子元器件是一项必备的基本技能，这包括电子元器件的电路符号、实物、用途等。本文电工学习网小编和大家分享一些电子元器件的电路符号及实物外形图，希望对大家的学习有所帮助...
- 电工常用的符号及单位
-
常用的符号及单位①欧姆定律I=U/R(适用于电阻电路，如白炽灯)②电能计算W=P·t（W为我们常说的电度，P为功率多少瓦或千瓦，t为时间小时计量）例如一个220V,60W的白炽灯，在220V电压工...
- 电路图常用的字母符号及释义(详细版!)
-
你是不是在查看电路图时常遇到一些看不懂的字母或字符，不明白它们表示什么含义？今天小编整理了一些电路图常用的字母符号及其释义，供大家查阅，赶快收藏吧！在之前的文章，小编大致整理了绘制电路图常涉及的电路符...
- 最全电工电路的字母符号大全!电工必备知识技能!建议收藏备用
-
最全电工电路的字母符号大全！电工必备知识技能！建议收藏备用！每天学习一点点就会有收获！学海无涯！...
- 电路符号大全，赶快收藏
-
认识电路符号是绘制电路图的前提。绘制电路图需要涉及的电路符号罗列出来有很多，大致可以分为五个类别：基本电路符号、传输路径符号、开关和继电器符号、集成电路组件以及限定符号。基本电路符号绘制基础电路图可能...
- 电气电路的图形符号，不怕看不懂电路图啦
-
一、电压、电流、电池的图形符号//二、信号灯、信号器件、按钮、旋钮开关和测量仪表的图形符号//三、负载开关的图形符号//四、熔断器的图形符号//五、继电器、接触器、接触器触点和操作器件的图形符号//六...
- 图解普通电阻器电路符号的含义，初学者必看
-
电子元器件的电路符号中含有许多有用的、对电路分析有益的识图信息，掌握了电子元器件电路符号的识图，电路分析就会简单一些。电阻器电路符号图1-1所示是普通电阻器电路符号图解示意图。在电路分析中，为了表述方...
- 电路图符号大全(电容、电阻、二极管、三极官、集成电路)
-
基础知识薄弱，不懂工作原理，不会看图、识图，这里更多电路图（原理图）符号大全、电路图形符号（指用一种书画图形代表一种电子元件）(比如:电容、电阻、二极管、三极官、集成电路等等)的符号为初学...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (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)