是什么?
许多应用程序并不是一个完整的可执行文件,它们被分割成一些相对独立的动态链接库,即 DLL 文件,放置于系统中。当我们执行某一个程序时,相应的 DLL 文件就会被调用。一个应用程序可使用多个 DLL 文件,一个 DLL 文件也可能被不同的应用程序使用,这样的 DLL 文件被称为共享 DLL 文件。
-
翻译一下,在 webpack 中的动态链接库就是:由于每次更改了内容 webpack 都会自动重新编译打包,如果我们把用到的如 react、jquery 这些外部库抽离出去,改变文件的时候不让 webpack 重新打包这部分文件,直接引用,那么重新编译打包的速度就会快很多,这样我们开发的效率也会提升。
-
再翻译一下,所谓动态链接库就是帮你提升开发效率的,使 webpack 在重编译的时候能打包更快。
-
在 webpack 中实现 DLL 主要依赖两个插件 webpack.DllReferencePlugin 和 webpack.DllPlugin,先记好这两个即可。
安装
-
还是从头开始,先新建一个文件初始化一下打包的基本配置。
-
我们以 react 这个库为例,假设我们要把 react 做为动态链接库,让其不需要每次重新编译。
初始化
$ npm init -y
安装一些基础的包
$ sudo npm i webpack webpack-cli react react-dom html-webpack-plugin webpack-dev-server clean-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
接下来就是一些基本的 [webpack.config.js] github.com/Ewall1106/webpack-demo/blob/master/webpack-dll/webpack.config.js 配置了,这些前面文章都已经就逐步详细介绍了,这里就一笔带过了,本篇文章只重点说明 DLL 怎么配置的。
然后我们在入口文件中随便写几行代码,跑起来后我们就可以看到 hello world 跃然于页面上了。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>hello world</div>, document.getElementById('app'));
打包 React 我们要把 react 做为动态链接库,所以我们单独为其新建一个打包配置文件 - [webpack.react.js] github.com/Ewall1106/webpack-demo/blob/master/webpack-dll/webpack.react.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: {
react: ['react', 'react-dom'],
},
output: {
filename: '_dll_[name].js',
path: path.resolve(__dirname, './dist'),
library: '_dll_[name]',
libraryTarget: 'umd',
},
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]',
path: path.resolve(__dirname, 'dist', 'manifest.json'),
}),
],
};
上面的配置重点是 plugins 插件中配合的 webpack.DllPlugin 这个插件,它会生成一个名为 manifest.json 的文件,你可以理解为就是一张表,我们可以定义依赖,也就是说待会我们用到了 react 的时候,告诉 webpack 就直接在这个文件里找,别重复打包编译 react 了。
打包一下,我们就可以看到 dist 文件夹中出现了打包后的 react 文件和 manifest.json 依赖表了。
$ npx webpack --config webpack.react.js
/dist
+ _dll_react.js
+ manifest.json
设置依赖 现在我们在主配置文件
module.exports = {
// ...
// ...
plugins: [
// 当使用react的使用,先去这个表里面找
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dist', 'manifest.json'),
}),
],
};
这个就是告诉 webpack,当我们页面中引入使用了 react 这个库的时候,直接去 manifest.json 里去找,然后引用打包好的 _dll_react.js 就行了。
小结
对比这两种方式,基本快了了 10ms 左右,如果你的项目很大,将一些 react、vue、jquery 这些库都进行 DLL 配置后,那么开发效率提高还是可观的。
./src/index.js 172 bytes [built][code generated]
webpack 5.4.0 compiled successfully in 56 ms
// 使用DLL配置react库后:
./src/index.js 172 bytes [built][code generated]
webpack 5.4.0 compiled successfully in 41 ms
DLL 这个名称很吓人,但是其实配置起来并不难,主要就是利用了 webpack 自己实现的两个插件,就简单的说到这里。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!