背景
- 很多時候我們在開發(fā)業(yè)務代碼的時候多多少少都引入了其他的第三方庫膜蛔，如
lodash.js,axios.js等局齿，那么在打包的時候呢每次打包就會重新打包這些引入的第三方庫手报，那有沒有辦法讓打包的時候能預先讓這些第三方庫打包好然后每次打包業(yè)務代碼遇到引入第三方庫的時候直接使用已打包好的第三方庫的打包文件呢定躏？那當然是有的啦患雇！DllPlugin 作為提升打包性能的重要一環(huán)个少，同學們一定要認真掌握哦。
Demo
- 假設我們要打包的入口文件長這樣：
// 現(xiàn)在我們引入像 react, react-dom, lodash 這樣的第三方庫
import React from 'react';
import ReactDom from 'react-dom';
import _ from 'lodash';
const App = () => <>{_.join(['This', 'is', 'vern'], ' ')}</>;
ReactDom.render(<App />, document.getElementById('root'));
那么當我們執(zhí)行 yarn build 進行代碼打包的時候靶溜，每次都會/node_modules/中找尋相關依賴進行打包开瞭，現(xiàn)在我們使用 DllPlugin插件先打包引入的第三庫，實現(xiàn)我們最初的預想：
// 首先新建一個 webpack.dll.js 文件
const path = require('path');
const webpack = require('webpack')
module.exports = {
mode: 'production',
entry: {
lodash: ['lodash'],
react: ['react', 'react-dom']
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, '../dll'),
library: '[name]',
},
plugins: [
new webpack.DllPlugin({
name: '[name]',
path: path.resolve(__dirname, '../dll/[name].manifest.json')
})
]
}
// 可以看到使用 webpack.DllPlugin({}) 插件主要是做一份打包文件的映射
然后我們執(zhí)行打包命令： webpack --config ./webpack.dll.js
于是會生成如下4個文件：
ok罩息，第三庫方已經打包完成了嗤详，接下來就應該是讓我們的項目每次打包都能自動引入我們打包好的第三方庫，這里我們會使用到 add-asset-html-webpack-plugin 這個插件瓷炮，所以同學們需要自行安裝一下（ yarn add / npm install --save ）
接著我們引入這個插件 const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') , 然后我們在主入口文件 webpack.config.js 中的 plugins 中使用它：
plugins: [
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, '../dll/react.dll.js')
}),
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, '../dll/lodash.dll.js')
}),
// 此外我們還需再用這個插件讓項目在打包的過程中能識別代碼中引入的已經被打包的第三方庫文件
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, '../dll', file)
})
]
配置好以上插件后葱色，我們使用 devServer 運行我們的 demo：
可以看到自動引入了打包好的第三方庫同時執(zhí)行生產環(huán)境打包操作的時候打包時間會有比較明顯的縮短，由于我的 demo 里做了許多比較消耗性能的操作娘香，這里就不上圖了苍狰，綜上我們的性能優(yōu)化點也就算是講完啦办龄。
總結
- 使用
DllPlugin插件打包項目中引入的第三方庫 - 使用
add-asset-html-webpack-plugin插件幫助我們在項目中自動引入他們 - 使用
DllReferencePlugin插件保證項目在執(zhí)行打包操作能正確識別已經被打包的第三方庫從而直接使用它而不會再次打包，當項目變得龐大淋昭，引入大量額外的第三方庫的時候俐填，這個插件作為性能優(yōu)化點的重要性就會變得非常重要，你 get 了嗎翔忽？
