Webpack性能优化 DLL 用法详解

2023-09-26 17:38:05 174

前言

在用Webpack打包的时候，对于一些不经常更新的第三方库，比如react，lodash，我们希望能和自己的代码分离开，Webpack社区有两种方案

CommonsChunkPlugin
DLLPlugin

对于CommonsChunkPlugin，webpack每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而DLLPlugin则是能把第三方代码完全分离开，即每次只打包项目自身的代码。

用法

要使用DLLPlugin，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件

webpack.config.js
webpack.dll.config.js

先来看下webpack.dll.config.js

constwebpack=require('webpack')
constlibrary='[name]_lib'
constpath=require('path')

module.exports={
entry:{
vendors:['react','lodash']
},

output:{
filename:'[name].dll.js',
path:'dist/',
library
},

plugins:[
newwebpack.DllPlugin({
path:path.join(__dirname,'dist/[name]-manifest.json'),
//Thismustmatchtheoutput.libraryoptionabove
name:library
}),
],
}

再改下webpack.config.js文件

constwebpack=require('webpack')

module.exports={
entry:{
app:'./src/index'
},
output:{
filename:'app.bundle.js',
path:'dist/',
},
plugins:[
newwebpack.DllReferencePlugin({
context:__dirname,
manifest:require('./dist/vendors-manifest.json')
})
]
}

manifest:require('./dist/vendors-manifest.json')这里的路径要和webpack.dll.config.js里面的对应。

然后运行

$webpack--configwebpack.dll.config.js
$webpack--configwebpack.config.js

然后你的html文件像下面这样引用

DLLLinkPlugin

上面的用法也存在一些不方便的地方，比如在webpack.config.js中要明确指出对应的manifest.json文件。还有当DLL需要更新的时候，比如react升级了，或者加入新的第三方库，都需要手动像下面这样编译一次。

$webpack--configwebpack.dll.config.js

因为上面这些问题，所以基于官方的DllReferencePlugin，我写了一个打包的插件，DllLinkPlugin。

使用这个插件，只需要对webpack.config.js作下小小的改动

constwebpack=require('webpack')
constDllLinkPlugin=require('dll-link-webpack-plugin')

module.exports={
//...
plugins:[
newDllLinkPlugin({
config:require('webpack.dll.config.js')
})
]
}

直接替换掉DllReferencePlugin，然后传入对应的DLL配置文件就可以了。每次打包的时候，只需要运行

$webpack--configwebpack.config.js

上面的命令便会自动生成对应的vendors文件，需要更新的时候，也会自动更新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Webpack性能优化 DLL 用法详解

热门推荐

随机推荐