上一篇: 【webpack5修行之道】第16篇：性能优化-externals

dll打包是什么？有什么作用？

node_modules会被打包为一个chunk文件，使用dll可以对某些库进行单独或组合进行打包，减少包的大小，在进行开发时，我们可以先进行node_modules的某些库进行dll打包，然后告诉webpack编译的时候不要打包这些文件了，也能提高编译速度

在根目录下新建一个webpack.dll.js文件

const {resolve} = require('path')
const webpack = require('webpack')

module.exports = {
    entry: {
        jquery: ['jquery']
        // 将数组中的一些包打包为一个chunk，包名字就和键一样
        // vue: ['vue','vuex','vue-router']
    },
    output: {
        // [name] = entry的键名
        filename: '[name].js',
        path: resolve(__dirname,'dll'),
        library: '[name]_[hash]', //打包的dll文件作为新的包，暴露出去的变量名
    },
    plugins: [
        //生成一个目录，告诉webpack不要打包这些文件了
        new webpack.DllPlugin({
            name: '[name]_[hash]', //映射库的名称
            path: resolve(__dirname,'dll/manifest.json') //生成一个库名和真正库的映射文件
        })
    ],
    mode: 'production'
}

然后修改package.json文件，添加编译dll的命令 dll: webpack --config=webpack.dll.js

修改完毕后我们可以尝试运行一下dll打包命令，看一下会生成什么,命令: npm run dll

从目录里可以看到，query已经被打包出来了，这个jquery就是一个包了，但是他向外暴露的名称为[name]_[hash]，而不再是jQuery或者$了，因为这个jquery.js是我们入口文件的的chunk包，他可以是几个库打包生成的

查看jquery的代码

可以看到，我们以后使用dll/jquery.js就要使用jquery_8c5f0a2404d8a4fce586这个变量

查看manifest.json代码

从这里可以看到，这里记录了新的包名和正则库位置的索引

dll打包已经可以了，那我们怎么把他引入项目使用呢？

这里我们需要使用webpack自带的DllReferencePlugin，他的作用是告诉webpack哪些包已经被dll打包了，你在打包的时候就不要打包了，而是用我已经打包了的包名

这里就算已经告诉webpack了，但是已经打包的js还是没有被引入项目，这里我们要借助add-asset-html-webpack-plugin，先安装npm install -D add-asset-html-webpack-plugin

修改webpack.config.js，将DllReferencePlugin和AddAssetHtmlPlugin添加进去

这个时候我们再运行webpack打包命令： npm run build

然后在浏览器中运行，发现jquery一样生效了

我们查看入口js，发现他是 如此的小

 

下一篇： 【webpack5修行之道】第18篇: 详细介绍entry