dll是什么?
类似于externals,指使哪些库是不需要打包的。和externals区别在于 dll 会单独的对某些库进行单独打包,将多个库打包成一个chunk。
那么它有什么意义呢?
正产情况下一个项目下 node_modules 里面的包会打包成一个chunk,但是第三方库很大,打包成一个chunk文件体积过大。所以通过 dll 将所有库进行单独打包成不同的chunk,更加有利于我们的性能优化,提高构建速度。
使用dll技术对某些库(第三方库:jquery,react,vue...)进行单独打包,减少重复打包次数,提高构建速度。
应该如何配置呢?
1. 先新建一个 webpack.dll.js 文件:配置专门打包某些第三方库(jquery、react、vue 等等),将来构建就不用重复打包了 (重复打包性能差,构建速度会慢)
webpack.DllPlugin 插件的作用:打包生成一个mainfest.json文件,提供和第三方库的映射关系。
// 将第三方库进行单独打包,需要建立起来一个依赖关系,告诉webpack打包的时候不用再集体打包jquery了,借用插件生成一个manifest.json文件
new webpack.DllPlugin({
name: '[name]_[hash:8]', // 映射库暴露的内容名称
path: resolve(__dirname, 'dll/mainfest.json') // 输出文件路径
})
整体基本配置如下:
const { resolve } = require("path");
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
// entry对jquery进行打包以及输出出去
entry: {
// 最终打包生成的[name] --> jquery
jquery: ['jquery'], // 数组里面放的是要打包的库,和jquery类似的都可以放在里面
},
output: {
filename: '[name].[hash:8].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash:8]', // 打包的库里面向外暴露出去的内容叫什么名字
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DllPlugin({
name: '[name]_[hash:8]', // 映射库暴露的内容名称
path: resolve(__dirname, 'dll/mainfest.json') // 输出文件路径
})
],
mode: 'production'
}
对应关系如下:
2. 修改webpack.config.js的配置:
- 通过设置 webpack.DllReferencePlugin 告诉 webpack 哪些库不用打包了
- 通过 add-asset-html-webpack-plugin 插件实现打包的时候自动的将资源引入到html文件里面
- 执行 webpack 命令,会默认的执行 webpack.config.js 里面的东西,要执行webpack.dll.js文件需要执行:webpack --config webpack.dll.js
整体配置如下:
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
const webpack = require('webpack');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'built.[hash:8].js',
path: resolve(__dirname, 'build')
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 告诉webpack哪些库不参与打包,同时使用时的名称也要改变
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/mainfest.json')
}),
// 将某个文件打包输出去,并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.3574583c.js')
})
],
mode: 'production'
}
打包后的html文件会自动引入jquery文件
注意:只要第三方库没有改变,dll文件只用执行一次就好,减少了重复打包的次数,提高构建速度。