frontend-document
frontend-document copied to clipboard
Published
20 hours ago •
jeddygong
jeddygong
[2021-02-03 更新] webpack5新特性详解
webpack5主要新特性介绍
- 资源模块；
- moduleIds & chunkIds 的优化；
- 移除Node.js的polyfill；
- 更强大的tree-shaking；
- 持久化缓存提高性能；
- Module Federation 模块联邦；
一、资源模块
- 资源模块是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外的loader
- raw-loader => asset/source 导出资源的源代码；
- file-loader => asset/resource 发送一个单独的文件并导出URL；
- url-loader => asset/inline 导出一个资源的data URL；
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
- 具体代码实现：
module.exports = {
...
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,//不打包 不编译node_modules下面的文件
use:[
{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}
}
]
},
{
test:/\.png$/,
type:'asset/resource'//对标file-loader
},
{
test:/\.ico$/,
type:'asset/inline'//对标url-loader 模块的大小<limit base64字符串
},
{
test:/\.txt$/,
type:'asset/source'//对标raw-loader
},
{
test:/\.jpg$/,
type:'asset',//对标raw-loader
parser:{
dataUrlCondition:{
maxSize:4*1024
}
}
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
]
}
}
二、moduleIds & chunkIds 的优化
概念和选项
- module: 每一个文件其实都可以看成一个module；
- chunk: webpack打包最终生成的代码块，代码块会生成文件，一个文件对应一个chunk
- 在webpack5之前，没有从entry打包的chunk文件，都会以1、2、3....的文件命名方式输出、删除某些文件，从而可能导致缓存失效
- 再生产模式下，默认启用这些功能
chunkIds: "deterministic", moduleIds: "deterministic", 此算法采用稳定性的方式将短数字ID（3或4个字符）的hash值分配给modules 和 chunks； - chunkId设置为deterministic，则output中的chunkFilename里的[name]会被替换成确定性短数字ID；
- 虽然chunkId不变（不管值是 deterministic | natural | names），但更改chunk内容，chunkhash还是会改变的。
| 可选值 | 含义 | 示例 |
|---|---|---|
| natural | 按使用顺序的数字ID | 1 |
| named | 方便调式的高可读性id | src_page_home.js |
| deterministic | 根据模块名称生成剪短的hash值 | 915（注意最高只能生成999个序列，所以建议文件不要超过999个） |
| size | 根据模块大小生成的数字id | 1024 |
三、移除Node.js的polyfill
- Webpack4 带来了许多Node.js核心模块 polyfill, 一旦模块中使用了任何核心模块（如crypto），这些模块就会被自动启用
- Webpack5 不在自动引入这些polyfill
3.1 安装
npm i crypto-js crypto-browserify stream-browserify buffer -D
3.2 使用： src/index.js
import CryptoJS from 'crypto-js';
console.log(CryptoJS.MD5('gongjin').toString());
3.3 webpack.config.js
module.exports = {
...
resolve:{
/* fallback:{
'crypto':require.resolve('crypto-browserify'),
'stream':require.resolve('stream-browserify'),
'buffer':require.resolve('buffer')
}, */
fallback:{
'crypto':false,
'stream':false,
'buffer':false
}
}
}
3.4 在webpack5中还是要使用polyfill（例如：crypto）该怎么使用呢？
3.4.1 安装
npm i crypto-js crypto-browserify -D
3.4.2 使用
// index.js 使用文件中
import CryptoJS from 'crypto';
console.log(CryptoJS);
console.log(CryptoJS.MD5('gongjin').toString());
// pachage.json 文件中添加
"browser": {
"crypto": "crypto-js" // crypto-js为前端使用的crypto插件，需要npm i crypto-js
},
// webpack.config.js 文件中添加配置
module.exports = {
...
resolve:{
fallback:{
'crypto':require.resolve('crypto-browserify'), // 需要使用crypto就加上这个
'stream':require.resolve('stream-browserify'), // 需要使用stream就加上这个
'buffer':require.resolve('buffer') // 需要使用buffer就加上这个
}
}
...
}
四、更强大的tree-shaking
-
tree-shaking就在打包的时候剔除没有用到的代码
-
Webpack4 本身的tree shaking比较简单，主要是找一个 import 进来的变量是否在这个模块内出现过；
-
webpack5可以进行根据作用域之间的关系来进行优化；
-
代码实现：
// inner.js import { test1 } from './module1.js'; test1(); // module1.js import { test3 } from './module2'; export function test1(){ console.log('test1'); } export function test2(){ console.log('test2' + test3); } // module2.js export function test3(){ console.log('test3'); } export function test4(){ console.log('test4'); } // webpack.config.js 文件中添加配置 module.exports = { ... mode: 'production', optimization:{ usedExports: true, // 标记出未被导出的变量, 使用到的文件才导出 } ... } -
sideEffects（了解即可）
-
函数副作用只当调用函数时，除了返回函数值之外，还产生了附加的影响，例如修改全局变量；
-
严格的函数式语言要求函数必须无副作用；
// webpack.config.js 文件中添加配置 module.exports = { ... mode: 'production', optimization:{ sideEffects: true, // true: 开启副作用，就会使没有用到的地方打包进去, 默认true不会打包 } ... }
-
// package.json "sideEffects": false, ```
五、持久化缓存提高性能
-
第一次构建是一次全量构建，它会利用磁盘模块缓存(以空间换时间)，使得后续的构建从中获利。
-
后续构建具体流程是：读取磁盘缓存 -> 校验模块 -> 解封模块内容。
-
第一次打包时间
webpack 5.11.0 compiled successfully in 4657 ms -
第二次打包时间
webpack 5.11.0 compiled successfully in 364 ms -
总结：
- 对比webpack4.x打包速度上提升了许多；
-
配置：
// webpack.config.js module.exports = { cache: { // 将缓存类型设置为文件系统 type: 'filesystem', // 默认是memory // 默认路径是 node_modules/.cache/webpack // 可以自定义文件目录：.cache_webpack5 cacheDirectory: path.resolve(__dirname, '.cache_webpack5') }
六、模块联邦
6.1 什么是模块联邦？
- Module Federation是为了解决独立应用之间代码共享问题。可以在项目内动态加载其他项目的代码，同步可以共享依赖。
- 通过细化功能模块、组件复用、共享第三方库、runtime dependencies线上加载npm包等，可以更好的服务于多页应用、微前端等开发模式。
以前我们常用的npm包来进行一个公共组件的引用（即UMD）
6.2 动机
- Module Federation的动机是为了不同开发小组间共同开发一个或者多个引用；
- 应用将被划分为更小的应用块，一个应用块，可以是比如头部导航或者侧边栏的前端组件，也可以是数据获取逻辑的逻辑组件
- 每个应用块由不同的小组开发；
- 应用或者应用块共享；
6.3 Module Federation
-
使用Module Federation时，每个应用块都是一个独立的构建，这些构建都将编译为容器；
-
容器可以被其他应用或者其他容器应用；
-
一个被引用的容器被称为 Application A / Application B ，引用者被称为 Application B / Application A， Application A / Application B 暴露模块给 Application B / Application A， Application A / Application B则可以使用这些暴露的模块，这些模块也可以被称为 remote 模块；
-
-
从而实现微前端的效果；
- 微前端也是一种模块共享的方式，主要解决多项目并存问题，多项目并存的最大问题就是模块共享，不能有冲突。
-
具体代码实现：
// Application A 亦可以叫远程模块 // webpack.config.js module.exports = { ... plugins: [ ... new ModuleFederationPlugin({ name:'remoteVar',// remote向外暴露的全局变量名, 唯一 filename:'remoteEntry.js',//构建出来的文件名 // 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用 exposes:{ './NewsList':'./src/NewsList' }, remotes:{ host:'hostVar@http://localhost:8081/remoteEntry.js' }, // 可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM 版本，从而统一版本； shared:['react','react-dom'] }) ] }; // Application B 亦可以叫本地模块 // webpack.config.js module.exports = { ... plugins: [ ... new ModuleFederationPlugin({ name:'hostVar', // remote向外暴露的全局变量名, 唯一 filename:'remoteEntry.js', remotes:{ remote:'remoteVar@http://localhost:8080/remoteEntry.js' }, exposes:{ './Slides':'./src/Slides' }, shared:['react','react-dom'] }) ] };
七、其它
-
支持崭新的web平台功能
-
支持通过import.meta访问当前文件路径
new URL("./image.png", import.meta.url)
webpack4.x upgrade webpack5.0（准备中...）