持久缓存以提高构建性能。在webpack5之前，webpack不提供持久缓存。我们开发的时候需要用到cache-loader之类的东西来做缓存在webpack4中：module.exports={module:{rules:[{test:/.ext$/,use:['cache-loader',...加载器]，包括：path.resolve('src'),},],},};在webpack5中，webpack5本身加入了持久化缓存，将生成的webpackmodules和chunks缓存起来，以提高构建速度。缓存将被设置为type:'memory'在开发模式下，在生产模式下禁用。module.exports={缓存：{类型：'文件系统'，}，}；cache.type有两个值memory|filesystemmemory表示打包产生的资源会存放在内存中。filesystem指示启用文件系统缓存。这里比较好的哈希算法指的是访问网页时的浏览器缓存。我们也知道webpack5之前有hashchunckhashcontenthash，hash改成了fullhash。首先介绍一下这些哈希值的区别。hash/fullhashhash/fullhash是根据包中的所有文件计算的哈希值。在一个包中，所有资源导出文件的文件名得到的[hash]是相同的。chunckhashchunckhash，顾名思义，就是在打包过程中根据当前chunck计算出的hash值。contenthashcontenthash，顾名思义，就是打包时根据内容计算的哈希值。当然这样看是没有问题的，不就是把ahash改成fullhash吗？当当当当当当然不是，我们来看看，直奔实战。喵喵和喵喵有什么区别。我们首先设置webpack的设置如下：constpath=require('path');module.exports={mode:'production',entry:{index:'./index.js'},output:{path:path.resolve(__dirname,'./dist'),filename:'[contenthash].js',},}这里是要打包的index.js的内容constnum=1;console.log('这是输出'，数字）；这是index.js添加注释和修改变量后的内容conststr=1;//hereistheoutputconsole.log('hereistheoutput',str);webpack4打包我们可以看到这里的hash值为e8510378c5f44d16af40。这是添加注释和修改变量后的打包结果。我们可以看到这里的哈希值为2c719bba27df586bf8f2。我们可以看到这里的hash值为webpack5打包时的d1bc13ae7e7dc828a64f。这是添加注释和修改变量后的打包结果。我们可以看到这里的哈希值为d1bc13ae7e7dc828a64f。总结我们可以清楚的看到webpack4其实影响了一个contenthash值的计算，用于添加注释和修改变量。如果是webpack5，则不受影响。TreeShaking的改进TreeShaking是一个常用于描述在JavaScript上下文中移除未引用代码（死代码）的术语。它依赖于ES2015模块语法的静态结构特性，例如import和export。webpack4既然有这个功能，那跟webpack5的升级有什么区别呢？我们创建三个文件，index.js,a.js,b.js//a.jsconstname='zhangSan';constage=18;export{name,age};//b.jsimport*asdatafrom'./a';export{data};//index.jsimport*ascommonfrom'./b';//我们可以看到使用了age而不是nameconsole.log(common.data.age);webpack4打包结果但是我们打包了结果，但是连名字也打包了。webpack5的打包结果简直完美。总结当然，在webpack4中，TreeShaking不能很好地对嵌套导出模块的未使用代码进行TreeShaking。当然我们也可以使用一些插件来实现，但是webpack5有了很大的改进。模块联合（ModuleFederation）Webpack5模块联合让Webpack达到在线运行时的效果，让代码直接在项目间使用CDN共享，无需在本地安装Npm包，构建发布！Containerproject//这里是容器的webpackmodulefederation设置【也就是在这个组件中使用】newModuleFederationPlugin({name:'react1',library:{type:'var',name:'react1'},remotes:{RemoteComponent:'RemoteComponent'},}),//在html中引入//这里是它的代码importReact,{Fragment}从'react';从'react-dom'导入ReactDOM;constButton=React.lazy(()=>import('RemoteComponent/Button'));functionApp(){functiononClick(){console.log('这里是由远程组件触发的');}return(