大数据请把文章推给想了解DLL的人
DLL(Dynamic Link Library)动态链接库在 webpack 中用来将可共享且不常改变的代码抽取成公共的库。
没有使用 DLL
react 和 react-dom 在 react 项目中是必备的两个库,把它们抽取出来单独打个包。
首先进行安装 npm install react react-dom --save
在 src 目录下新建 index.jsx 文件,编写 react 代码
import React, { Component } from 'react';
export default class App extends Component {
state = {
message: 'hello react ',
};
render() {
return <div>{this.state.message}</div>;
}
}
在一层级的 index.js 中引入 react 组件,并安装 axios 后使用它来发送一个请求
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';
import axios from 'axios';
ReactDOM.render(<App />, document.getElementById('container'));
axios.get('https://httpbin.org/get').then((res) => {
console.log('res', res);
});
react 代码需要通过 babel 进行处理,可以参考 这篇文章,在没有使用 DLL 的时候,第三方库 react react-dom 和 axios 都被打包到了 702.js 文件中。

打包DLL库
如果需要对某些资源单独打包,就可以使用到 DLL,新建 webpack.dll.js 文件,自定义编译规则,通过 DllPlugin 生成 manifest.json文件,其中包含依赖的映射关系。
const { DllPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: {
react: ['react', 'react-dom'],
},
output: {
filename: './[name].js',
path: path.resolve(process.cwd(), './dll'),
library: '[name]',
},
plugins: [
new DllPlugin({
name: '[name]',
path: path.resolve(__dirname, './dll/manifest.json'),
}),
],
};
执行 npx webapck --config ./webpack.dll.js 后,生成三个文件,mainfest.json,react.js 和一个注释文件(可通过TerserPlugin去除)

如果此时直接编译 webpack.config.js 文件的话,react 和 react-dom还是会被作为第三方库和 axios 编译到一起。
引入DLL库
虽然已经通过 DLL 将 react 和 react-dom 自行打包了,但是没有告诉 webpack.config.js 不需要再把这两者打包到公共的库中。这时候请出 DllReferencePlugin 来处理。
const { DllReferencePlugin } = require('webpack');
module.exports = {
// 其它配置省略
plugins: [
new DllReferencePlugin({
manifest: path.resolve(process.cwd(), './dll/manifest.json'),
context: path.resolve(process.cwd(), './'),
}),
],
};
此时第三方库的 js 文件里已经没有了 react 和 react-dom,文件名由 702.js 变成了 559.js 是因为内容发生了变化。

运行编译后的 index.html 文件,发现报错 react is not defined,也没有在页面中显示 hello react 的代码。

将文件添加到 html 中
这是因为第三库打包的 js 文件中排除了 react 和 react-dom ,自行打包的 react.js 又没有被引入到 html 文件中,所以执行的时候就找不到文件了。
安装插件 add-asset-html-webpack-plugin ,通过它来引入文件到 html 中
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
// 其它配置省略
plugins: [
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(process.cwd(), './dll/react.js'),
outputPath: './auto',
}),
],
};
这样通过 DLL 编译的 react.js 文件就被引入到 html 文件中,页面也能正常显示

总结
使用 DLL 可以自定义打包的内容,分为以下三个步骤。
webpack.dll.js中使用DllPlugin生成 mainfest.json 和 js 文件webpack.config.js中使用DllReferencePlugin去 mainfest.json 文件中找到映射关系,排除不需要打包的库webpack.config.js中通过add-asset-html-webpack-plugin在 html 文件引入资源
以上是关于使用 DLL 打包的总结, 更多有关 webpack 的内容可以参考我其它的博文,持续更新中~
大数据请把文章推给想了解DLL的人的更多相关文章
- 大数据de 2文章
点击可免费试用网易有数 文章来源:网易有数的搭积木原则阐述 ,经作者文雯授权发布 wo ceceshi 相关文章:[推荐] SpringBoot入门(五)--自定义配置
- 谦先生的程序员日志之我的hadoop大数据生涯一
从一个初级程序员到高级程序员的经历 你好!我是谦先生,我是茫茫程序猿中的一猿,平凡又执着. 刚入行的时候说实话,啥都不懂,就懂点皮毛的java,各种被虐狗的感觉.又写js又写css又写后台...慢慢被 ...
- 面试系列二:精选大数据面试真题JVM专项-附答案详细解析
公众号(五分钟学大数据)已推出大数据面试系列文章-五分钟小面试,此系列文章将会深入研究各大厂笔面试真题,并根据笔面试题扩展相关的知识点,助力大家都能够成功入职大厂! 大数据笔面试系列文章分为两种类型: ...
- 大数据时代,IT行业竟有如此多高薪职位!
近年来云计算.大数据.BYOD.社交媒体.3D打印机.物联网……在互联网时代,各种新词层出不穷,令人应接不暇.这些新的技术.新兴应用和对应的IT发展趋势,使得IT人必须了解甚至掌握最新的IT技能. 另 ...
- 一台虚拟机,基于docker搭建大数据HDP集群
前言 好多人问我,这种基于大数据平台的xxxx的毕业设计要怎么做.这个可以参考之前写得关于我大数据毕业设计的文章.这篇文章是将对之前的毕设进行优化. 个人觉得可以分为两个部分.第一个部分就是基础的平台 ...
- JAVA开发搞了一年多的大数据,究竟干了点啥
JAVA开发搞了一年多大数据的总结 2021年7月份加入了当前项目组,以一个原汁原味的Java开发工程师的身份进来的,来了没多久,项目组唯一一名大数据开发工程师要离职了,一时间一大堆的数据需求急需 ...
- 跟上节奏 大数据时代十大必备IT技能(转)
新的想法诞生新的技术,从而造出许多新词,云计算.大数据.BYOD.社交媒体……在互联网时代,各种新词层出不穷,让人应接不暇.这些新的技术,这些新兴应用和对应的IT发展趋势,使得IT人必须了解甚至掌握最 ...
- 跟上节奏 大数据时代十大必备IT技能
跟上节奏 大数据时代十大必备IT技能 新的想法诞生新的技术,从而造出许多新词,云计算.大数据.BYOD.社交媒体……在互联网时代,各种新词层出不穷,让人应接不暇.这些新的技术,这些新兴应用和对应的IT ...
- 大数据学习总结(7)we should...
大数据场景一.各种标签查询 查询要素:人.事.物.单位 查询范围:A范围.B范围.... 查询结果:pic.name.data from 1.痛点:对所有文本皆有实时查询需求2.难点:传统SQL使用W ...
- 分析 BAT 互联网巨头在大数据方向布局及大数据未来发展趋势
> 风起云涌的大数据战场上,早已迎百花齐放繁荣盛景,各大企业加速跑向"大数据时代".而我们作为大数据的践行者,在这个"多智时代"如何才能跟上大数据的潮流, ...
随机推荐
- Layui+dtree实现左边分类列表,右边数据列表
效果如下 代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 2022-11-19:第二高的薪水。表结构和数据的sql语句如下,输出200,因为200是第二大的。请问sql语句如何写? DROP TABLE IF EXISTS `employee`; CREAT
2022-11-19:第二高的薪水.表结构和数据的sql语句如下,输出200,因为200是第二大的.请问sql语句如何写? DROP TABLE IF EXISTS `employee`; CREAT ...
- 2022-02-16:将数组分割成和相等的子数组。 给定一个有 n 个整数的数组,你需要找到满足以下条件的三元组 (i, j, k) : 0 < i, i + 1 < j, j + 1 < k < n
2022-02-16:将数组分割成和相等的子数组. 给定一个有 n 个整数的数组,你需要找到满足以下条件的三元组 (i, j, k) : 0 < i, i + 1 < j, j + 1 & ...
- vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例
使用.env加后缀的方式来建立某个模式下的环境变量, 例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境): .env.development .env ...
- PictureBox 从数据库加载图片照片
Private Sub PAPHOTO_SEL() Try Dim objCon As SqlConnection Dim objCmd As SqlCommand '打开数据库 objCon = N ...
- Redis - 二进制位数组
简介 Redis 使用字符串对象来表示位数组,因为字符串对象使用的 SDS 数据结构是二进制安全的,所以程序可以直接使用 SDS 结构来保存位数组,并使用 SDS 结构的操作函数来处理位数组. 在 S ...
- linux 管理进程和计划任务
目录 一.进程原理 二.进程工作过程 三.进程类型 四.管理进程 五.前后台调度 六.定时任务 七.管理定时任务 一.进程原理 进程:指正在运行的程序称之为进程 程序:指的是没有运行的代码 线程:真正 ...
- 【编程日记】搭建PyCharm集成开发环境
0.相关确定 本教程使用的版本号为专业版PyCharm 2022.3.2,如果您是初学者,为了更好的学习本教程,避免不必要的麻烦,请您下载使用与本教程一致的版本号. 1.PyCharm的下载 官网下载 ...
- 驱动开发:内核实现SSDT挂钩与摘钩
在前面的文章<驱动开发:内核解析PE结构导出表>中我们封装了两个函数KernelMapFile()函数可用来读取内核文件,GetAddressFromFunction()函数可用来在导出表 ...
- 24 式加速你的 Python
一,分析代码运行时间 第1式,测算代码运行时间 平凡方法 快捷方法(jupyter环境) 第2式,测算代码多次运行平均时间 平凡方法 快捷方法(jupyter环境) 第3式,按调用函数分析代码运行时间 ...