• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

重读webpack5

互联网 diligentman 6天前 7次浏览

重读webpack5

基础补充

关于harmony modules
ES2015 modules 又叫做 harmony modules

关于副作用:
webpack的 side effect副作用,是指在import后执行特定行为的代码,而不是export一个或者多个,例如 pollyfill,全局css样式等

关于entry:
entry 对象是webpack开始 build bundle 的地方。

关于context:
context 是包含入口文件的目录的绝对字符串,默认就是当前目录,但是建议设置。

关于依赖图:
webpack是 dynamically bundle 依赖通过依赖图 dependency graph,避免打包没用的module。

关于Loader:
module loader可链式调用,链中的每个loader都将处理资源,调用顺序是反的。

关于图片:
webpack5内置了处理图片、字体文件,不需要额外的loader来处理 。

{
 test: /.(png|svg|jpg|jpeg|gif)$/i,
 type: 'asset/resource',
}

关于 csv、xml
csv-loader来加载csv文件数据, xml-loader来加载xml文件数据 。
可以使用 parser 而不是loader来处理toml, yamljs and json5格式的资源,如下

// webpack.config.js
const yaml = require('yamljs');
module: {
    rules: [
       {
          test: /.yaml$/i,
          type: 'json',
          parser: {
            parse: yaml.parse,
          }
        }
    ]
}
// 代码中使用
import yaml from './data.yaml';
console.log(yaml)

关于html-webpack-plugin:
html-webpack-plugin安装方式 npm i --save-dev html-webpack-plugin@next

关于manifest
webpack使用manifest来track module映射到bundle的关系,使用webpack-manifest-plugin

关于sourceMap
source maps 用做track js的error和warning,可以把编译后的代码指向源代码,定位异常的确切位置。

开发服务

每次改了代码,重写打包会很麻烦,有3种解决方法,
webpack的watch模式
webpack-dev-server
webpack-dev-middleware,webpack-dev-middleware是一个包装器,它会将webpack处理过的文件发送到服务器,webpack-dev-server内部使用。

// 1. 使用webpack-dev-server,安装好包之后,在webpack.config.js 中配置
 devServer: {
    contentBase: './dist',
 }
// 2 使用 webpack-dev-middleware和express,安装之后,新建serverjs
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
    webpackDevMiddleware(compiler, {
      publicPath: config.output.publicPath,
    })
);

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!n');
});

代码分割 codes splitting

1 entry 分割

这样没什么用,用的lodash还是会整个打到最后的bundle中,虽然可以通过 import chunk from 'lodash/chunk'这种写法优化

// index.js
import _ from 'lodash'
console.log(  _.chunk([1,2,3,4], 2))

// index2.js
import _ from 'lodash'
console.log(_.join(['Another', 'module', 'loaded!'], ' '));

// webpack.config.js
entry: {
  index: './src/index.js',
  index2: './src/index2.js',
}

2 Prevent Duplication

入口的 dependOn 字段和 runtimeChunk: 'single' 的方法


// 入口配置
entry: {
    index: {
      import: './src/index.js',
      dependOn: 'shared',
    },
    index2: {
      import: './src/index2.js',
      dependOn: 'shared',
    },
    shared: 'lodash',
}
// webpack.config.js
 optimization: {
    runtimeChunk: 'single',
  }

SplitChunksPlugin允许我们将共同的依赖提取到一个现有的入口文件块或一个全新的chunk中。

 module.exports = {
    entry: {
      index: './src/index.js',
      another: './src/another-module.js',
    },
   optimization: {
     splitChunks: {
       chunks: 'all',
     },
   },
  };

3 动态导入 dynamic import

使用 require.ensure 或者 import()

// index.js 
// 我们需要 default 值的原因是,自从webpack 4以来,当导入CommonJS模块时,导入将不再解析为module.exports的值
import('lodash').then(({default: _}) => {
  console.log(
      _.chunk([1, 2, 3, 4], 2)
  )
})

Prefetching/Preloading modules

  • prefetch 预获取: 将来可能需要一些资源来支持运行。
  • preload 预加载: 在当前运行期间需要的资源
  • preload chunk和父 chunk并行加载,prefetch chunk在父块加载完成后开始加载。
  • preload chunk具有中等优先级并立即下载。当浏览器空闲时,才会下载 prefetch chunk。
  • 父块应该立即请求preload chunk,prefetch chunk可能在将来的任何时候使用。
  • 浏览器支持不同。
  • 一个简单的预加载例子是,有一个总是依赖于一个大库的组件,这个库应该在一个单独的块中,例如 import(/* webpackPreload: true */ 'ChartingLibrary');
  • webpackPreload 不正确使用会对性能产生影响,谨慎使用。

缓存

浏览器会缓存文件,这会让web加载更快,减少不必要的流量。但是编译文件更新了就会造成麻烦。

Output Filename

contenthash 会根据文件内容计算一个字符串,文件内容变了就会改变。
但是哪怕内容重新打包,hash也不一定一样,webpack版本新的应该没这个问题,这是因为webpack在entry块中包含了某些样板文件,特别是 runtime 和 manifest。

output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
}
提取样板

SplitChunksPlugin 可以用于将module拆分为单独的bundle。webpack提供了一个优化特性,可以使用optimize.runtimecchunk 选项将运行时代码分割成一个单独的chunk。将其设置为single,为所有块创建单个运行时bundle.

optimization: {
 runtimeChunk: 'single',
}

会得到下边的结果

                          Asset       Size  Chunks             Chunk Names
runtime.cc17ae2a94ec771e9221.js   1.42 KiB       0  [emitted]  runtime
   main.e81de2cf758ada72f306.js   69.5 KiB       1  [emitted]  main
                index.html  275 bytes          [emitted]

提取第三方库,像react等,它们一般不会变化,使用 cacheGroups 如下

optimization: {
     runtimeChunk: 'single',
     splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\/]node_modules[\/]/,
           name: 'common-libs',
           chunks: 'all',
         }
       }
     }
 }

得到如下结果

  asset common-libs.e6d769d50acd25e3ae56.js 1.36 MiB [emitted] [immutable] (name: common-libs) (id hint: vendor)
  asset runtime.2537ce2560d55e32a85c.js    15.9 KiB [emitted] [immutable] (name: runtime)
  asset index.f9c0d8e7e437c9cf3a6e.js     1.81 KiB [emitted] [immutable] (name: index)
  asset index.html 370 bytes [emitted]
Module ID

如果在index.js,增加一个引用新的文件的使用,重新打包,会发现,所有的hash都变了,但是公用库内容没变,hash还是变了,因为增加了新的文件会导致它们的moduleid发生变化,所以hash也变了。在配置中增加如下。

optimization: {
  // 告诉webpack在选择 模块id 时使用哪种算法,默认false 
  moduleIds: 'deterministic'
}

用webpack5测试,只有index.js的hash变了,runtime chunk 和 common-libs 都没变。

环境变量

webpack内置了环境变量的设置方法,

npx webpack --env NODE_ENV=local --env production --progress

但是module.exports必须是个方法

const path = require('path');

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

依赖管理

如果你的require包含表达式则会创建一个上下文,因此在编译时不知道确切的模块

// 源目录
- modules/fn1.js
         /fn2.js   


// 源代码
let name = 'fn1';
const f = require("./modules/" + name + '.js')
console.log(f);


// webpack 这么处理
Directory: ./modules
Regular expression: /^.*.js$/

生成一个context module。它包含了对该目录中所有模块的引用,匹配正则表达式的请求可能需要这些模块。
context模块包含一个映射,它将请求转换为模块id。

// webpack打包后有这么一个文件
var map = {
    "./fn1.js": 430,
    "./fn2.js": 698
};

这意味着支持动态需求,但会导致所有匹配的模块都包含在bundle中。

热更新 HMR

开启

如果是使用 webpack-dev-middleware 那么需要使用 webpack-hot-middleware 来开启热更新

// 在devserver开启
devServer: {
  contentBase: './dist',
  hot: true,
}
使用 node api
const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.config.js');
const options = {
  contentBase: './dist',
  hot: true,
  host: 'localhost',
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});

摇树 Tree Shaking

摇树是用来删没用的代码的,它依赖于ES2015模块语法的静态结构就是 import 和 export,是由rollup发展而来。
webpack2之后,内置了对es6的支持以及未使用模块导出的检测。
webpack4扩展了这个功能,通过package.json的 sideEffects 字段,来表明 “纯文件” 可以安全删除。

源代码

// math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

// index.js

import {cube} from './math.js';
console.log(cube(5))

webpack.config.js

 mode: 'development',
 optimization: {
   usedExports: true,
 },

打包后的文件,没用的代码并没有删除

/*!*********************!*
  !*** ./src/math.js ***!
  *********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "cube": () => /* binding */ cube
/* harmony export */ });
/* unused harmony export square */
function square(x) {
  return x * x;
}
function cube(x) {
  return x * x * x;
}

/***/ })

下边是没配置 usedExports: true,这个配置的作用,就是让webpack来判断哪些模块没使用,此配置依赖于
optimization.providedExports(告诉webpack哪些export是由模块提供的),默认就是true

/*!*********************!*
  !*** ./src/math.js ***!
  *********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "square": () => /* binding */ square,
/* harmony export */   "cube": () => /* binding */ cube
/* harmony export */ });
function square(x) {
  return x * x;
}
function cube(x) {
  return x * x * x;
}

/***/ })

在100% ESM模块的世界中,识别副作用是很简单的,但是现在没到哪一步,所以需要在package.json中的sideEffects来告诉webpack,
标记文件在副作用树,上面提到的所有代码都没有副作用,所以我们可以简单地将该属性标记为false,以通知webpack它可以安全地修剪未使用的导出文件。

// 开启后,打包后的死代码,仍然没删除
{
  "name": "your-project",
  "sideEffects": false
}

// 如果有些文件确实有副作用,提供一个数组即可 
{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

注意,如果使用css-loader等加载样式,需要把css放到副作用数组中,防止在生产模式的时候,被webpack无意中删除。
还可以在webpack.config.js中的module.rules中的一个rule中指定。

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

side effects 和 usedExports(摇树)的区别

side effects可以直接抹去文件,例如
如果设置了 sideEffects: false, 然后在index.js引入一个 math.js但是不使用,打包后的bundle不会打包math.js
但是如果没设置,不使用的文件还是会在打包后的文件中,代码如下

/***/ 733:
/*!*********************!*
  !*** ./src/math.js ***!
  *********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
/* unused harmony exports square, cube */
function square(x) {
  return x * x;
}
function cube(x) {
  return x * x * x;
}

/***/ })

usedExports 是依赖于terser来检测,在声明中的副作用,不如side effects直接
也无法直接跳过整个文件,React的高阶组件存在问题。

// 使用这个表明表示没有副作用,这会允许删掉这行代码,不分析他的side effect 
var Button$1 = /*#__PURE__*/ withAppProvider()(Button);

因为文件的import声明不好判断可以在package.json 的 sideEffects 字段加入该文件
If no direct export from a module flagged with no-sideEffects is used,
the bundler can skip evaluating the module for side effects

// 使用这一行代码 
import { Button } from "@shopify/polaris"

// 下边是 @shopify/polaris 库里的文件 

// index.js
import './configure';
export * from './types';
export * from './components';
 
// components/index.js
export { default as Breadcrumbs } from './Breadcrumbs';
export { default as Button, buttonFrom, buttonsFrom, } from './Button';
export { default as ButtonGroup } from './ButtonGroup';

// package.json
"sideEffects": [
  "**/*.css",
  "**/*.scss",
  "./esnext/index.js",
  "./esnext/configure.js"
],

对于 import { Button } from "@shopify/polaris"这样代码,有以下4种情况

include it: include the module, evaluate it and continue analysing dependencies
skip over: don't include it, don't evaluate it but continue analysing dependencies
exclude it: don't include it, don't evaluate it and don't analyse dependencies

仔细分析代码经过的模块

index.js:     没使用直接export的代码, 但是用sideEffects标记了 -> include it
configure.js: 没使用直接export的代码, 但是用sideEffects标记了 -> include it
types/index.js: 没使用直接export的代码, 没sideEffects标记  -> exclude it
components/index.js: 没使用直接export的代码, 没sideEffects标记 , but reexported exports are used -> skip over
components/Breadcrumbs.js: 没使用直接export的代码, 没sideEffects标记 -> exclude it. 
This also excluded all dependencies like components/Breadcrumbs.css even if they are flagged with sideEffects.
components/Button.js: 使用直接export的代码, 没sideEffects标记-> include it
components/Button.css: 没使用直接export的代码, 但是用sideEffects标记了 -> include it

这样造成,直接引入的文件,只有4个

index.js: pretty much empty
configure.js
components/Button.js
components/Button.css

函数调用变副作用树

通过使用/*#__PURE__*/注释,可以告诉webpack函数调用是无副作用(纯)的。

它可以放在函数调用的前面,以标记它们为无副作用。传递给函数的参数没有被注释标记,可能需要单独标记。
当未使用变量声明中的初始值被认为是无副作用(pure)时,它将被标记为死代码,不会被执行,并被最小化者删除。
优化时启用此行为。innerGraph设置为true

/*#__PURE__*/ double(55);

减少代码

mode 设置为 production 即可,
--optimize-minimize 也可以开启 TerserPlugin,
module-concatenation-plugin这个插件在tree shaking中使用。

Build Performance

  • 保持 webpack、node、npm是最新版本
  • 使用 DllPlugin 打包
  • 在loader中减少解析范围
const path = require('path');
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
      },
    ],
  },
};
Boot
  • 减少文件体积,移除没用的代码,
  • 使用缓存 cache配置

Module Federation

  • github demo
  • 多个独立的build应该构成唯一的应用程序。这些单独的build之间不应该有依赖关系,因此可以单独开发和部署它们。这通常被称为 微前端,但并不仅限于此
  • module两种,本地构建的模块(local module)、运行时容器加载的远程模块(remote module)。
  • 加载远程模块,是一个异步的加载chunk的操作,就是使用import、require.ensure或者require([])
  • 容器通过容器入口创建,并暴露出获取指定模块的方法,异步加载模块(chunk loading)和异步解析模块(解析期间与其他模块交叉执行)
  • 解析顺序,远程解析到本地,或者本地解析到远程,不会收到影响
  • 容器可以使用其他容器的模块,容器之间的依赖共享可以实现。
  • 容器可以标识模块为可重写,消费者提供重写方法,就是一个可以替换容器中可替换模块的模块
  • 当consumer提供一个模块时,容器的所有模块都将使用替换模块而不是本地模块,不提供替换模块,就使用本地模块
  • 容器用一种不需在被consumer重写时下载的方式来管理可重写模块,通常是通过将它们放入不同的chunk来实现的。
  • 替换模块的provider只提供异步加载方法,它允许容器按需加载替换模块。provider用在容器不需要的时候不加载的方式来管理替换模块,通常是通过将它们放入不同的chunk来实现的
  • name 用于标识容器中的可重写模块
  • 重写动作和容器暴露模块相似的方式类似,分为两步,异步加载和异步解析。
  • 当使用嵌套,给一个容器提供重写将会自动重写嵌套容器中具有相同“名称”的模块。
  • 重写必须在加载容器的模块之前提供。在初始块中使用的重写,只能被不使用Promise的同步模块重写。一旦被解析,重写项将不再是可重写的。
  • 每个构建都可作为容器,并可以消费别的构建作为容器使用。每个构建都可以通过从其容器中加载其他公开的模块来使用。
  • shared module是既可以重写又可以重写嵌套容器的模块。它们通常在每个构建中指向同一个模块,例如同一个库
  • packageName选项允许设置一个包名来查找所需的版本。默认情况下,自动推断模块请求,当自动推断应该被禁用时,将requiredVersion设置为false

Building blocks

  • OverridablesPlugin 此插件让一个模块,可重写
  • ContainerPlugin 此插件使用指定的exposed modules创建一个额外的容器entry,它内部使用OverridablesPlugin,并向容器的consumer公开override API
  • ContainerReferencePlugin 插件add特定的引用到容器作为externals,并允许从这些容器导入远程模块。它还调用这些容器的override API来提供对它们的override。本地重写(通过__webpack_override__或override API,当build也是一个容器时)和指定重写将被提供给所有引用的容器
  • ModuleFederationPlugin 此插件组合了ContainerPlugin和ContainerReferencePlugin,Overrides and overridables 会被组合到一个指定的共享模块列表中

Module Federation需要实现的目标

  • 应该可以公开和使用webpack支持的任何模块类型
  • chunk加载应并行加载所有需要的东西(web:到服务器的单程往返)
  • 从consumer到容器的控制,重写模块是单向操作,兄弟容器不能覆盖彼此的模块。
  • 应该独立于环境,web, Node.js等都可以用
  • 共享的相对和绝对请求(不使用也应该被提供、根据config.context来解析、不默认使用requiredVersion)
  • 共享的模块请求(按需提供,将匹配构建中使用的所有equal模块请求,将提供所有匹配模块,

它将从package.json中提取requiredVersion在图中的这个位置,可provide和consume多重不同版本当你有nested node_modules)

  • 带有后缀/共享的模块请求将匹配所有带有此前缀的模块请求

使用场景

  1. 每个页面单独构建

单个spa的每个页面都是在单独的构建中通过容器构建公开的,应用程序外壳是一个引用所有页面的单独构建的远程模块,
这样的话每个页面都可以单独部署,当路由更新或添加新路由时,应用程序外壳就会被部署。
应用程序外壳将常用库定义为共享模块,以避免在页面构建中重复使用它们

  1. 组件库作为容器

多应用共享一个公共的组件库,可以将其构建为公开每个组件的容器,每个应用消费组件库容器。
对组件库的更改可以单独部署而不需要重新部署所有应用程序。应用程序自动使用组件库的最新版本。

动态远程容器

容器接口支持get和init方法。init是一个异步兼容的方法,调用时只有一个参数:共享范围对象。
此对象在远程容器中用作共享scope,并由host填充provided modules。
它可以在运行时动态的连接 remote containers to a host container

(async () => {
  // 初始化shared scope,使用当前build和所有远程的provided modules
  await __webpack_init_sharing__('default');
  const container = window.someContainer; // or get the container somewhere else
  // Initialize the container, it may provide shared modules
  await container.init(__webpack_share_scopes__.default);
  const module = await container.get('./module');
})();

容器尝试提供共享模块,但如果共享模块已经被使用,则警告和提供的共享模块将被忽略。容器仍然可以使用它作为fallback。
通过这种方式,你可以动态加载一个A/B测试,它提供了一个共享模块的不同版本。


程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2021/01/%e9%87%8d%e8%af%bbwebpack5/
喜欢 (0)