是什么剃浇？
許多應用程序并不是一個完整的可執(zhí)行文件从撼，它們被分割成一些相對獨立的動態(tài)鏈接庫舌劳，即 DLL 文件股囊，放置于系統(tǒng)中。當我們執(zhí)行某一個程序時暴构，相應的 DLL 文件就會被調用想暗。一個應用程序可使用多個 DLL 文件挨摸，一個 DLL 文件也可能被不同的應用程序使用诲宇，這樣的 DLL 文件被稱為共享 DLL 文件际歼。— 百度百科
翻譯一下姑蓝，在 webpack 中的動態(tài)鏈接庫就是：由于每次更改了內容
webpack都會自動重新編譯打包鹅心，如果我們把用到的如react、jquery這些外部庫抽離出去纺荧，改變文件的時候不讓webpack重新打包這部分文件旭愧，直接引用，那么重新編譯打包的速度就會快很多宙暇，這樣我們開發(fā)的效率也會提升输枯。再翻譯一下，所謂動態(tài)鏈接庫就是幫你提升開發(fā)效率的占贫，使
webpack在重編譯的時候能打包更快桃熄。在
webpack中實現(xiàn)DLL主要依賴兩個插件webpack.DllReferencePlugin和webpack.DllPlugin，先記好這兩個即可型奥。
安裝
還是從頭開始蜻拨，先新建一個文件初始化一下打包的基本配置池充。
我們以
react這個庫為例桩引，假設我們要把react做為動態(tài)鏈接庫缎讼，讓其不需要每次重新編譯。
# 初始化
$ 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 配置了坑匠，這些前面文章都已經就逐步詳細介紹了血崭，這里就一筆帶過了，本篇文章只重點說明
DLL怎么配置的厘灼。然后我們在入口文件中隨便寫幾行代碼夹纫，跑起來后我們就可以看到
hello world躍然于頁面上了。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>hello world</div>, document.getElementById('app'));
打包 React
- 我們要把
react做為動態(tài)鏈接庫设凹，所以我們單獨為其新建一個打包配置文件 - 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文件夾中出現(xiàn)了打包后的react文件和manifest.json依賴表了称诗。
$ npx webpack --config webpack.react.js
/dist
+ _dll_react.js
+ manifest.json
設置依賴
- 現(xiàn)在我們在主配置文件 webpack.config.js 中配置一下依賴萍悴。
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配置后疾就，那么開發(fā)效率提高還是可觀的澜术。
./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自己實現(xiàn)的兩個插件鸟废，就簡單的說到這里。
