本文详细解析Webpack中提取第三方库的两种主流方案：CommonsChunkPlugin与DLLPlugin。通过对比两者在打包机制、构建效率及配置复杂度上的差异，分别给出了基于Vue项目的具体配置示例与HTML引用方式，帮助开发者优化构建性能并有效利用浏览器缓存。
提取第三方库的两种常用方案
在使用Webpack进行项目打包时，通常需要将第三方库单独提取出来，生成稳定的文件版本，以便利用浏览器缓存机制减少重复请求次数。目前常用的提取第三方库方案主要有两种。
- CommonsChunkPlugin
- DLLPlugin
两者的核心区别在于：第一种方案在每次构建时，都会将第三方库重新参与打包过程；而第二种方案仅在首次构建时打包第三方库，后续每次构建仅处理项目源代码，最终只需引入首次生成的第三方库压缩文件即可。
CommonsChunkPlugin配置详解
下面简要介绍CommonsChunkPlugin的配置方法。
以Vue项目为例进行说明。
const vue = require('vue')
{
entry: {
// bundle是我们要打包的项目文件的导出名字， app是入口js文件
bundle: 'app'，
// vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
vendor: ['vue']
},
output: {
path: __dirname + '/bulid/',
// 文件名称
filename: '[name].js'
},
plugins: {
// 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
// 打包之后就生成vendor.js文件
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
打包完成后，将生成的文件引入到HTML页面中即可使用。
<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>DLLPlugin配置与构建流程
接下来介绍DLLPlugin的配置方法。
首先需要准备两个配置文件。
- webpack.config.js
- webpack.dll.config.js
webpack.dll.config.js的具体配置如下所示。
const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
entry: {
vendors: ['vue', 'vuex']
},
output: {
filename: '[name].dll.js',
path: 'dist/',
library
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'dist/[name]-manifest.json'),
// This must match the output.library option above
name: library
}),
],
}
随后，webpack.config.js文件的配置如下。
const webpack = require('webpack')
module.exports = {
entry: {
app: './src/index'
},
output: {
filename: 'app.bundle.js',
path: 'dist/',
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendors-manifest.json')
})
]
}
配置完成后，依次执行以下命令进行构建。
$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js最后在HTML文件中通过以下方式引用生成的文件。
<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>以上内容为本文的全部介绍，希望能对各位的学习有所帮助，同时也欢迎大家继续支持本站。