web前端知识点（webpack篇）

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

四个概念

entry：入口起点，可以配置多页面。
output：出口，项目编译完成后之后文件输出路径。
loader：webpack 自身只理解 JavaScript，loader 能够去处理非 JavaScript 文件并转化 JavaScript，处理源文件，一次处理一个。
plugins：用来扩展 webpack 功能，插件能够执行很多任务。如：打包优化、压缩等。

核心对象

Tapable：控制钩子的发布与订阅。
Compiler：webpack 的编译器，继承 Tapable 对象，可以广播和监听 webpack 事件，webpack 生命周期值存在一个 Compiler 对象。Compiler 在 webpack 启动时创建实例，compiler 实例中包含 webpack 的完整配置，包括 loaders, plugins 信息。
Compilation：编译器编译之后的资源信息对象，继承 Tapable 对象，可以广播和监听 webpack 事件，Compilation 实例仅代表一次 webpack 构建和生成编译资源的的过程。

webpack 开发模式开启 watch 选项，每次检测到入口文件模块变化时，会创建一次新的编译: 生成一次新的编译资源和新的 compilation 对象，这个 compilation 对象包含了当前编译的模块资源 module，编译生成的资源，变化的文件，依赖的的状态。

module、chunk、bundle

module：js 模块，就是被 require 或 export 的模块，如：ES 模块、commonjs 模块、 AMD 模块。
chunk：代码块，是进行依赖分析的时候，代码分割出来的代码块，包括一个或多个 module，是被分组了的 module 集合，code spliting 之后的就是chunk。
bundle：文件，最终打包出来的文件，通常一个 bundle 对应一个 chunk。

打包原理

根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。

构建流程

生成 options（将 webpack.config.js 和 shell 中的参数合并到 options 对象）。
实例化 compiler 对象（webpack 全局对象，包含 entry、output、loader、plugins等所有配置对象）。
实例化 compilation 对象（compiler.run 方法执行，开始编译过程，生成 compilation 对象）。
分析入口 js 文件，调用 AST 引擎处理入口文件，生成抽象语法树 AST，根据 AST 构建模块的所有依赖。
通过 loader 处理入口文件的所有依赖，转换为 js 模块，生成 AST，然后继续递归遍历，直至所有依赖被分析完毕。
对生成的所有 module 进行处理，调用 plugins，合并，拆分，生成 chunk。
将 chunk 生成为对应 bundle 文件，输出到目录。

HMR（热更新）

模块热替换功能会在应用程序应用过程中进行替换、添加或者删除模块，无需加载整个页面。主要通过以下几种方式：

保留在完全重新加载页面时丢失的应用程序状态。
只更逊变更内容，以节省宝贵的开发时间。
调整样式更加快速，几乎相当于在浏览器调试器中更改样式。

webpack 的热更新，只是提供一套接口和基础的模块替换的实现。开发者需要在代码中通过热更新的接口（module.hot.xxx）向 webpack 声明依赖模块和当前模块是否能够更新，以及更新的前后进行的处理。如果接受更新，那么需要开发者自己来在模块替换前清理或者保留必要的数据、状态，并在模块被替换后恢复之前的数据、状态。在 vue-cli 等脚手架中，热更新的开发者这边的工作是由 vue-loader、css-loader 等加载器已经完成了，再配合 webpack 的 module.hot 等 API 来完成了热更新。

大致热更新流程：webpack 进行文件变化监听，服务端和客户端使用 websocket 进行通信，服务端传递模块变化信息给客户端，客户端根据文件变化消息获取变更模块代码，进行模块的替换。

运行时开启热更新配置，在打包的 bundle 里面包含 HMR runtime 及 websocket 功能。
服务端与客户端建立 websocket 长连接。
webpack 监听文件变化，文件保存时触发 webpack 重新编译，编译后代码保存在内存中。
编译时会生成 hot-update.json （已改动模块的 json）、hot-update.js （已改动模块的 js）。
通过 websocket 向客户端发送 hash 值。
客户端对比 hash 值，一致走缓存，不一致再通过 Ajax 获取 hot-update.json，json 包含模块 hash 值，再通过 jsonp 请求获取 hot-update.js。
热更新 js 模块，若失败，则 live reload 刷新浏览器代替热更新（若模块未配置热更新，则同样 live reload）。

webpack如何管理模块

当编译器开始运行、解析和映射应用程序时，manifest 数据集合会保留所有模块的详细要点。当完成打包并发送到浏览器时，会在运行通过 manifest 来解析和加载模块。无论选择哪种模块语法，import 或者 require 都已转换为 __webpack_require__ 方法，此方法指向模块标识符。通过使用 manifest 中的数据，runtime 能够查询模块标识符，检索出背后对应的模块。

style-loader 与 css-loader

css-loader 用来识别 css 文件，转为 js 对象。

style-loader 将 css-loader 编译之后的 js 对象转为 css 并插入 DOM 中。

tree shaking

移除 JavaScript 上下文中的未引用代码(dead-code)。

// 用法  package.json
{
  sideEffects: false
}

这个有一定的副作用：如果一个文件执行一些特殊功能，而不是仅仅暴露一个或多个 export，比如 polyfill，影响全局作用域，通常又不提供 export，那么它将会被移除。

如果所有代码都不含副作用，则可以标记为 false，如果有，那么就提供一个数组：

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

在项目中，任何导入的文件都受 tree shaking 影响，比如导入的 css 文件，我们则需要将它们添加进去：

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

shimming全局变量

webpack 中如果需要用到的不规范的第三方库，有可能会引起全局依赖，如 jQuery 的 $。但是如果我们需要用到一个全局变量，可以使用 ProvidePlugin 后，能够在通过 webpack 编译的每个模块中，通过访问一个变量来获取到 package 包。如果 webpack 知道这个变量在某个模块中被使用了，那么 webpack 将在最终 bundle 中引入我们给定的 package。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
 },
 plugins: [
   new webpack.ProvidePlugin({
     _: 'lodash'
   })
 ]
}

// 传统引入方式
npm install --save babel-polyfill

// src/main.js
import 'babel-polyfill';

......

polyfills 虽然是一种模块引入方式，但是并不推荐在主 bundle 中引入 polyfills，因为这不利于具备这些模块功能的现代浏览器用户，会使他们下载体积很大、但却不需要的脚本文件。

让我们把 import 放入一个新文件，并加入 whatwg-fetch polyfill：

npm install --save whatwg-fetch

// 新建 src/polyfills.js
import 'babel-polyfill';
import 'whatwg-fetch';

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  entry: {
    polyfills: './src/polyfills.js',
    index: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

// index.html 然后根据条件引入
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
  <script>
    var modernBrowser = (
      'fetch' in window &&
      'assign' in Object
    );

    if ( !modernBrowser ) {
      var scriptElement = document.createElement('script');

      scriptElement.async = false;
      scriptElement.src = '/polyfills.bundle.js';
      document.head.appendChild(scriptElement);
    }
  </script>
  </head>
  <body>
    <script src="index.bundle.js"></script>
  </body>
</html>

webpack 优化

保持 node.js 最新版本：较新的版本能够建立更高效的模块树以及提高解析速度。

loaders 应用于最少数的必要模块：

// no
{
  test: /\.js$/,
  loader: "babel-loader"
}

// yes
{
  test: /\.js$/,
  include: path.resolve(__dirname, "src"),
  loader: "babel-loader"
}

尽量少使用不同的 loader/plugin 工具：每个额外的 loader/plugin 都有启动时间。
使用 Dlls：使用 DllPlugin 将更改不频繁的代码进行单独编译。这将改善引用程序的编译速度，即使它增加了构建过程的复杂性。
尽量保持 chunks 小巧：减少编译的整体大小，以提高构建性能。
Worker Poll：thread-loader 可以将非常消耗资源的 loaders 转存到 worker pool 中。
持久化缓存：使用 cache-loader 启用持久化缓存。使用 package.json 中的 "postinstall" 清除缓存目录。
关闭 Source Maps：Source Maps很耗性能。

开发环境中避免用到只有在生产环境中才能用到的工具：

UglifyJsPlugin
ExtractTextPlugin
[hash]/[chunkhash]
AggressiveSplittingPlugin
AggressiveMergingPlugin
ModuleConcatenationPlugin

未完待续......

posted @ 2020-07-12 12:21 前端杂货阅读(557) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端杂货

Anything could be achieved with a willing heart