vue升级webpack5 |
您所在的位置：网站首页 › vue更新插件版本 › vue升级webpack5 |
vue升级webpack5
|
vue升级webpack5
八月更文第二弹， 开始啦！ 🍦 webpack5已经发布快一年了，其中有很多新功能让人跃跃欲试，身为技术热爱者的我们怎么能够停滞不前呢 🐶，今天就来学习一下用webpack5搭建项目和新特性了解。 升级vue-cli在vue项目内升级webpack5是很便利的，直接升级本地vue-cli到5.0.0就可以使用了，但是注意这里是beta版本，线上环境请谨慎使用。 升级vue-cli 📃 First, install the latest Vue CLI globally: npm install -g @vue/cli@next# OR yarn global add @vue/cli@next 复制代码 升级所有插件 Upgrade All Plugins at Once vue upgrade --next 复制代码 检查 升级完成后查看package.json,如图所示即代表升级成功。示例项目为新建项目，不存在npm包不兼容情况，如果是旧项目升级，会遇到许多兼容问题，请移步vue升级webpack5官网查看。具webpack官方介绍，v5版本主要有以下新增 过时功能移除首先是去掉了在 Webpack4 里面已经 Warming 的功能。 其次是 IgnorePlugin 和 BannerPlugin 现在必须传入一个参数，参数可以是 Object、String或者Function。require.include 语法被废弃，使用时会有 Warming。当然这个行为可以通过 Rule.parser.requireInclude 来把这个语法改成 allowed, deprecated 或者 disabled。 还有就是去掉自动 Node.js Polyfills 。一开始的化 Webpack 的主要目的是让 Node.js 的模块能够在浏览器运行，但随着模块格局的改变，越来越多的模块只用于浏览器，这个时候再自动 Polyfills 一些 Node 模块（例如 crypto）无疑会增加打包体积，在 Webpack5 之后去掉了这个自动行为。 长期缓存webpack5的长期缓存要处理什么问题呢，首先在webpack4中我们可以注意到这样的现象： 代码热更新速度快 代码运行run速度慢 代码打包build速度慢 这里的原因是webpack4的缓存只是在内存中的，当webpack程序重新建立时，内存就会丢失，从而造成了运行和打包慢的情况。 说到这里我想大家对webpack5的长期缓存已经猜到了，就是要解决webpack程序运行缓存丢失，从而造成运行打包慢的问题。 目前webpack5提供了一套持久化抽象，并提供了几个实现: IdleFileCachePlugin：持久化到本地磁盘 MemoryCachePlugin：持久化到内存 根据Webpack运行环境的不同，在dev开发时依旧使用MemoryCachePlugin，而在build时使用IdleFileCachePlugin。Webpack5直接从内部核心代码的层面，统一了持久化缓存的方案，有效降低了缓存配置的复杂性。除此之外，由于所有被webpack处理的模块都会被缓存，我们npm run start/build的二次编译速度会远超cache-loader，同时dll也可以退出历史舞台了。 Webpack4时之所以要有dll，是因为cache-loader并不能覆盖所有模块，只能对个别被loader处理的模块进行缓存。而那些通用的库是没法被cache-loader处理的，所以只能通过dll的方式来预编译。 实际上，Webpack5的内置缓存方案无论从性能上还是安全性上都要好于cache-loader： 性能上：由于所以被webpack处理的模块都会被缓存，缓存的覆盖率要高的多 安全上：由于cache-loader使用了基于mtime的缓存验证机制，导致在CI环境中缓存经常会失效，但是Webpack5改用了基于文件内容etag的缓存验证机制，解决了这个问题。 Module Federation这个被翻译为模块联邦，听起来有点奇怪。但是它可能时webpack5中最引人瞩目的一个特性， 这个特性可谓时真正实现了不同应用之间的模块共享。 例如我们有一个应用a,一个应用b,我们想让b应用使用a应用中的一个组件。这时候可能脑子的第一想法时cv大法搞一个，但是这样后期的维护就会变得很艰难，组件更新的实时同步根本无法确保。 这时候模块联邦就帮我们解决了这样一个问题。 具体的使用介绍将会在下一篇文章《webpack5-模块联邦实现微前端》中详细讲解。希望大家及时关注哦~ The Better TreeShaking树摇的优化主要有两点： 嵌套 Webpack现在会去追踪 export 的链路，对于嵌套场景有更好的优化。 在下面的示例代码中，我们最终的使用参数只有webpack_five而webpack_four是不会出现在最终的打包程序中的。 // inner.js` export const webpack_four = 4 export const webpack_five = 5 // module.js import * as inner from "./inner" export { inner } // user.js` import * as module from "./module" console.log(module.inner.webpack_five) 复制代码 内部模块 Webpack 4 不会去分析导入和导出模块之间的依赖关系，Webpack5 里面会通过 optimization.innerGraph记录依赖关系。 在下面的示例代码中，只有webpack_cookie方法使用了 egg。最终可以实现标记更多没有使用的导出项。 import { egg } from "./egg" function eatingEgg() { return egg } export function webpack_cookie() { return eatingEgg() } 复制代码 其他特性 Named chunk IDs （命名块 id） Compilers （编译器） Config changes （配置更改） 其他 webpack5 最后本文到此结束，希望对你有帮助 😉 |
【本文地址】
今日新闻 |
推荐新闻 |