阅读 1407

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官网查看0.png

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_fivewebpack_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

最后

本文到此结束,希望对你有帮助 😉

文章分类
前端