概念
DLLPlugin 和 DLLReferencePlugin 用某種方法實(shí)現(xiàn)了拆分 bundles，同時(shí)還大大提升了構(gòu)建的速度,將包含大量復(fù)用模塊且不會(huì)頻繁更新的庫進(jìn)行編譯襟锐，只需要編譯一次疫赎，編譯完成后存在指定的文件中祈惶。在之后的構(gòu)建過程中不會(huì)再對(duì)這些模塊進(jìn)行編譯米苹，而是直接使用 DllReferencePlugin 來引用動(dòng)態(tài)鏈接庫的代碼稚字。一般會(huì)對(duì)常用的第三方模塊使用這種方式雕崩，例如 react鳖谈、react-dom、lodash 等缆娃。只要這些模塊不升級(jí)更新捷绒，這些動(dòng)態(tài)鏈接庫就不需要重新編譯。
摘要
本文介紹了 Webpack 中 DllPlugin 插件的使用贯要，以及配合使用 AddAssetHtmlPlugin 或者 HtmlWebpackIncludeAssetsPlugin 將構(gòu)建好的 JS 文件插入到 html頁面中
代碼地址
github: 源碼
歡迎交流暖侨，Star！
項(xiàng)目目錄
常規(guī)webpack項(xiàng)目崇渗，搭建過程本文章不在描述
myreact
|- /build
|- webpack.config.js
|- webpack.dll.conf.js
|- /dist
|- dll
|- js
|- /src
|- index.js
|- package.json
|- index.html
具體項(xiàng)目結(jié)構(gòu)字逗，請(qǐng)看下圖
image
下面開始DLL之旅
一.build目錄下創(chuàng)建webpack.dll.conf.js(DLLPlugin)
const webpack = require("webpack")
const path = require('path')
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '..', dir);
module.exports = {
entry: {
# 將 react、lodash等模塊作為入口編譯成動(dòng)態(tài)鏈接庫
vendor: ['react', 'react-dom', 'react-router-dom', 'lodash']
},
output: {
# 指定生成文件所在目錄文件夾宅广，
# 將它們存放在了 src 文件夾下
path: resolve('public'),
# 指定文件名
library: '_dll_[name]',
# 存放動(dòng)態(tài)鏈接庫的全局變量名稱葫掉，例如對(duì)應(yīng) lodash 來說就是 lodash_dll_lib
# 這個(gè)名稱需要與 DllPlugin 插件中的 name 屬性值對(duì)應(yīng)起來
filename: 'dll/_dll_[name].[hash].js'
},
plugins: [
new CleanWebpaclPlugin(['dll'], {
root: resolve('public')
}),
new webpack.DllPlugin({
name: '_dll_[name]',
# 和output.library中一致，值就是輸出的manifest.json中的 name值
path: path.join(__dirname, '../public/dll', '[name].manifest.json')
})
]
}
二. 創(chuàng)建webpack.base.conf.js 使用 DllReferencePlugin
const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '..', dir);
module.exports = {
entry: './src/index.js',
output: {
path: resolve('dist'),
filename: 'js/[name].[hash].js',
library: '_dll_[name]'
},
plugins: [
# 需添加root 否則無法刪除跟狱，exclude未生效
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..')
}),
new HTMLWebpackPlugin({
title: 'Webpak DllPlugin 的使用',
template: resolve('index.html'),
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
# 告訴 Webpack 使用動(dòng)態(tài)鏈接庫
new webpack.DllReferencePlugin({
// 描述 lodash 動(dòng)態(tài)鏈接庫的文件內(nèi)容
manifest: require(../public/dll/vendor.manifest')
})
]
}
三俭厚、在 index.html 文件中引入動(dòng)態(tài)鏈接庫
由于動(dòng)態(tài)鏈接庫我們一般只編譯一次，除非依賴的三方庫更新驶臊，之后就不用編譯挪挤，因此入口的 index.js 文件中不包含這些模塊叼丑，所以要在 index.html 中單獨(dú)引入。
兩種方案
- 手動(dòng)添加script扛门，手動(dòng)copy打包好的dll文件夾到dist鸠信，麻煩反復(fù)，很不爽
- 使用add-asset-html-webpack-plugin或者h(yuǎn)tml-webpack-include-assets-plugin插入到html中论寨，簡單自動(dòng)化星立，美滋滋
所以我們肯定會(huì)采用第二種方式，下面著重講下add-asset-html-webpack-plugin與html-webpack-include-assets-plugin插件的使用葬凳，項(xiàng)目中使用add-asset-html-webpack-plugin
安裝大同小異
npm install add-asset-html-webpack-plugin -D
npm install html-webpack-include-assets-plugin -D
使用也有相似的地方
webpack.base.conf.js 文件中進(jìn)行使用
# add-asset-html-webpack-plugin
...;
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
...,
plugins: [
...,
# 給定的 JS 或 CSS 文件添加到 webpack 配置的文件中贞铣，并將其放入資源列表 html webpack插件注入到生成的 html 中。
new AddAssetHtmlPlugin([
{
# 要添加到編譯中的文件的絕對(duì)路徑
filepath: path.resolve(__dirname,'../public/dll/_dll_vendor.js'),
outputPath: 'dll',
publicPath: 'dll',
includeSourcemap: false
}
])
]
}
# html-webpack-include-assets-plugin
...;
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
module.exports = {
...,
plugins: [
...,
# 給定的 JS 或 CSS 文件添加到 webpack 配置的文件中沮明，并將其放入資源列表 html webpack插件注入到生成的 html 中。
new HtmlWebpackIncludeAssetsPlugin([
{
assets: ['dll/_dll_vendor.js'],
append: false
}
])
]
}
兩者區(qū)別
image
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>愛你的一只貓哈哈哈1111</title>
</head>
<body>
<div id='root'></div>
</html>
<script type="text/javascript" src="dll/_dll_vendor.js"></script>
<script type="text/javascript" src="/js/runtime.830efec54753fd6ed91b.js"></script>
<script type="text/javascript" src="/js/vendors.830efec54753fd6ed91b.js"></script>
<script type="text/javascript" src="/js/app.830efec54753fd6ed91b.js"></script>
運(yùn)行項(xiàng)目
npm run build
查看dist文件下的文件
