webpack优化系列(11)-dll

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的配置：

1. 通过设置 webpack.DllReferencePlugin 告诉 webpack 哪些库不用打包了
2. 通过 add-asset-html-webpack-plugin 插件实现打包的时候自动的将资源引入到html文件里面
3. 执行 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文件只用执行一次就好，减少了重复打包的次数，提高构建速度。

系列相关

• webpack优化 - HMR
• webpack优化 - sourceMap
• webpack优化 - oneof
• webpack优化 - 缓存
• webpack优化 - tree-shaking
• webpack优化 - code-split
• webpack优化 - 懒加载&预加载
• webpack优化 - PWA
• webpack优化 - 多进程打包
• webpack优化 - externals