webpack dll使用及废弃理由

dll 的使用

先把公用包打出来，以及生成一个清单 manifest.json

const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: {
        react: 'react',
        reactDom: 'react-dom'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]_dll.js',
        library: '[name]',
    },
    plugins: [
        new webpack.DllPlugin({
            format: true,
            name: '[name]',
            path: path.resolve(__dirname, 'dist/manifest.json'),
            context: __dirname,
        }),
    ],
}

在项目中引用公共包，需要注意的是公共包是作为 library 输出的，项目中需要手动导入公共包，这里使用 add-asset-html-webpack-plugin 插件

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
    entry: './index.js',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react']
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: path.join(__dirname),
            manifest: require('./dist/manifest.json')
        }),
        new HtmlWebpackPlugin(),
        new AddAssetHtmlPlugin({
            publicPath: './',
            filepath: path.resolve(__dirname, './dist/*_dll.js'),
        }),
    ]
}

源代码附件：dll.zip

webpack4 之后为何废弃 dll

主要是因为 splitChunksPlugin 功能太强大了，无需 dll了

optimization: {
      splitChunks: {
            // chunks指定切割chunk类型，all（所有类型） | initial（初始chunk） | async（异步chunk）
            chunks: 'all',
            // 切割完文件最小 > 20kb，不然不切割
            minSize: 20000,
            // 共享该模块最小chunk数
            minChunks: 1,
            // 最多有 30 个异步请求加载该 module
            maxAsyncRequests: 30,
            // 初始化的时候最多有 30 个请求该模块
            maxInitialRequests: 30,
            // 强制执行拆分的体积阈值，即超过 50kb 强制拆分，比如 react-dom 超过了 50kb，这里会拆分出 vendors-node_modules_react-dom_index_js.js
            enforceSizeThreshold: 50000,
            automaticNameDelimiter: '~',
            cacheGroups: {
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    // 指定输出缓存组名称
                    filename: 'js/vendors.js',
                    // 指定缓存组命中优先级
                    priority: -10,
                    // 当 module 未变时，是否可以使用之前的 chunk
                    reuseExistingChunk: true,
                },
                defaultChunks: {
                    // 比如两个入口文件都用到了c.js，会打包出公共包 defaultChunks-c_js.js
                    minChunks: 2,
                    priority: -1,
                    reuseExistingChunk: true,
                },
            },
      },
},