第五代webpack昨天发布,距离上一个版本4.0有两年的时间,这次的发版给javascript生态中最常用的打包模块带来了很多变化。如果像我一样,在webpack兴起之前就开始了你的前端生涯,你还记得在工作中使用gulp和grunt的抱怨和沮丧吗?
让我们来看看这个非常受欢迎的库的新版本带来的重大变化和改进
这个版本需要关注5个关键点
快速持久的构建
开发者们抱怨最多的就是关于webpack的打包速度太慢。这个模块打包现在提供了一共文件缓存系统,通过打包加速可以提高我们的开发生产力。
更小的包体积
改善已经做了TreeShaking的代码(已被称为废弃代码)。同时上一个版本有能力移除没用的代码,webpack5更进了一步。webpack有能力移除代码里的内部模块,从而减少体积。更多webpack5的优化特性,访问https://webpack.js.org/blog/2020-10-10-webpack-5-release/#major-changes-optimization
更长的缓存
在打包大小之后,最能改善应用加载时间的是缓存。有缓存后,访问者访问你的应用体检几乎是瞬间打开的。在webpack 5中,对代码所做的改变不会改变最小化版本(例如,注释或变量名),不会导致缓存失效。意味着你的用户将能够体验长时间的缓存。
现在进行重大更改,以便以后进行进一步的改进
在此版本有许多改变将不会有任何的显性影响。换句话来说,在未来的版本里会允许使用新的特性。
这些新的特性包括用http(s) 导入 module 扩展。它将帮你开发微前端。还有更多新的并且让人兴奋的特性,可以访问https://webpack.js.org/blog/2020-10-10-webpack-5-release/#experiments
另外一个改变是Nodejs版本需要从6到10.13.0,放弃对旧Node.JS版本的支持将允许团队简化他们的代码,并删除支持这些旧版本的解决方案。
webpack5同时也带来了一个新的 experiments 配置选项支持 WebAssembly, Async Web Assembly, Top Level Await 并且输出你的包成一个模块(之前只有rollup支持)
模块联邦
这是个新的特性,简单说,允许多个 webpack 构建在一起工作。它允许你的应用动态加载代码从其它应用(webpack打包的)。模块联合最流行的应用是启用微前端架构。
如果你感兴趣学习更多,可以访问https://webpack.js.org/concepts/module-federation/