webpack 性能优化 DLL 才硬核（webpack怎么做性能优化）
cac55 2024-10-07 06:43 35 浏览 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 XP的安全
-
默认安装完WindowsXP之后，我们的WindowsXP并不很安全。因此，我们有必要对系统进行一些修修补补，一般情况下我们都要动用到注册表。诚然，修改注册表是一种非常有效的方法，但是它需要一定的...
- 你造吗?十种方式保护你免受"零日攻击"
-
|责编：王迪WindowsXP的寿终正寝，数据安全问题又再一次成为人们关注的焦点。近日，微软透漏，一个基于InternetExplorer的“零日攻击”给用户带来了严重破坏。“零日攻击”一种利用...
- 特立独行——打造游戏专用独立系统
-
大部分人的电脑是为了学习和工作用的，所以，如果你是一个游戏迷，那么推荐你安装一个独立系统专用于游戏，做到工作娱乐两不相扰。方案1：游戏专用移动WindowsXP目的：解决游戏兼容性问题喜欢玩游戏的都...
- 驰为VX8 3G Win8入门教程篇
-
距离Win8.1的正式发布也将近1年了，凭借着Win8.1在移动便携以及娱乐办公上的优势，现在的Win8平板越来越受到消费者的追捧，而驰为VX83G就是其中一款，搭载了卓越的英特尔Z3735G四核芯，...
- 易淘收银软件说明
-
易淘收银系统，简称易淘收银，专为小型及连锁零售、餐饮行业打造。基于SaaS模式，智能便捷，无需维护，轻量级设计却功能强大，简约而不失专业，助力门店高效管理收银。1、前台系统：收银客户端；2、后台系...
- CAD打不开怎么办?原因可能是电脑中毒了，6步就能完美解决问题
-
一、问题描述我的CAD安装后无法打开，安装过程中没有出现任何问题，但是安装后打开就出现一个对话框“DBXCAS0”点击后又出现“FATALERROR:UnhandledAccessViola...
- 腾讯QQ6.1正式版发布更新
-
2014-07-2405:12:00作者：张林【中关村在线软件资讯】7月24日消息：腾讯QQ官网小幅更新了QQ6.1正式版，最新版本号升级至11905，继续主打扁平化、炫酷登录窗口、支持同步最近一...
- Win10等网页版OneDrive无法登陆怎么办?
-
IT之家（www.ithome.com）：Win10等网页版OneDrive无法登陆怎么办？Win10之家报道，微软OneDrive云网盘是跨平台的数据同步和存储服务，支持WindowsPC（如Wi...
- 经典回顾:折戟沉沙的Windows Longhorn有着惊艳的登录屏幕
-
尽管微软原先计划让WindowsLonghorn继承WindowsXP操作系统的衣钵，但这个充满雄心壮志的操作系统项目最终还是未能迎来曙光，而是被微软用WindowsVista取而代...
- 电脑怎么优化
-
电脑配置和宽带流量也是硬件，但这些要求其实并不需要很高，关键还是怎么去安全使用电脑并进行有效的优化。电脑的应用和优化处理一、电脑的应用和优化处理二、目前，大家使用的个人电脑，配置方面均没多大问题，比如...
- 怎么安装usb驱动
-
USB驱动主要是针对WIN98时代的说法，如今WINXP已集成大部分USB驱动，通常都能识别。只有极少数情况下，例如手机、打印机或扫描仪等办公设备的USB驱动可能无法自动识别。1、USB驱动偶尔无法...
- 普通话考试多名考生信息被泄露，接投诉后涉事网站被限制访问
-
“陕西普通话成绩查询网（sxpth.cn）”泄露个人信息网站截图网传图片显示，407名普通话考试考生的姓名、身份证号码等个人信息疑似被泄露。9月26日下午，涉事网站sxpth.cn的域名注册商——成...
- 电脑伪技巧——个人电脑无需设置登录密码
-
默认情况下，我们每次登录系统都要输入登录账户对应的密码才能进入桌面。有些朋友觉得这样很麻烦，由于电脑只是自己使用，还不如不要设置密码，这样每次可以自动登录。大家知道，账户密码是系统验证用户合法性的唯一...
- Windows 10/11 自带远程桌面:实用技巧与操作指南
-
Windows10/11自带远程桌面：实用技巧与操作指南在当今快节奏的数字时代，远程访问和控制计算机的需求日益增长。微软在Windows10和Windows11中内置了远程桌面功能，为用户提供...
- 不升级系统的5大原因造吗?
-
2015-01-2405:54:00作者：陈占伟Windows10系统的发布，让人们重新将目光聚焦到生命力长久的Windows系统之上。如今操作系统越来越多，似乎Windows升级的获得的关注度...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (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)