深入分析 Nuxt.js 或 Vue.js 官方 SSR 框架中，`webpack-node-externals` 的作用，以及它如何优化服务器端打包。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们来聊聊 Nuxt.js 或者 Vue.js 官方 SSR 框架中，webpack-node-externals 这个小可爱，看看它到底在服务器端打包中扮演着什么角色，又是如何优化我们的打包过程的。

开场白：SSR 的烦恼与 Node Modules 的甜蜜负担

首先，咱们得明确一个大前提：SSR (Server-Side Rendering)，也就是服务器端渲染。这玩意儿能让你的网站首屏加载更快，对 SEO 更友好，用户体验蹭蹭往上涨。但它也有个小小的副作用：需要在服务器上运行 JavaScript 代码。

这意味着什么呢？意味着你需要把你的 Vue 组件、JavaScript 代码，以及你用到的各种 npm 包，统统打包成一个可以在 Node.js 环境下运行的 bundle。问题就出在这里： Node.js 环境本身就已经自带了很多模块，比如 fs、path、http 这些核心模块。你的项目很有可能也依赖了一些常用的 npm 包，比如 lodash、moment、axios。这些包在服务器上通常也已经安装好了，或者很容易安装。

如果你把这些已经存在的模块和 npm 包全部打包进你的 SSR bundle 里，那就相当于你带了一大堆已经有的东西，到你已经有的地方。这不仅浪费了打包时间，还增加了 bundle 的体积，最终导致服务器启动更慢，内存占用更高。就像你已经穿了袜子，又穿了一双袜子，然后又穿了一双袜子，然后…脚都臭了！

webpack-node-externals：拯救 SSR 的英雄

这时候，我们的英雄 webpack-node-externals 就闪亮登场了！它的作用很简单，就是告诉 Webpack： “嘿，Webpack，这些模块和 npm 包，你不用打包进 bundle 里了。在服务器运行时，直接从 node_modules 目录中 require 就行了！”

简单来说，它就是个“免打包通行证”，让那些已经存在于服务器环境中的依赖项，可以自由地“通行”，而不用被打包进 bundle。

webpack-node-externals 的工作原理

webpack-node-externals 的核心思想是：将服务器端的依赖项视为 "externals"。在 Webpack 的配置中，"externals" 是一个非常重要的概念。它可以告诉 Webpack，某些模块应该从外部获取，而不是打包进 bundle。

webpack-node-externals 实际上就是动态生成一个 "externals" 列表，这个列表包含了 node_modules 目录下的所有模块。当 Webpack 遇到这些模块时，就会跳过打包，直接在生成的 bundle 中留下一个 require 语句。

举个例子，如果你使用了 lodash 这个 npm 包，并且使用了 webpack-node-externals，那么你的 SSR bundle 中可能就会出现类似这样的代码：

// 这是一个简化的例子
var _ = require('lodash');

当这段代码在服务器上运行时，Node.js 会自动去 node_modules 目录中查找 lodash 这个模块，并将其加载进来。

如何使用 webpack-node-externals

使用 webpack-node-externals 非常简单，只需要安装它，然后在你的 Webpack 配置文件中引入并使用即可。

安装:

npm install webpack-node-externals --save-dev
# 或者
yarn add webpack-node-externals -D

Webpack 配置 ( webpack.server.config.js ) :

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node', // 告诉 Webpack 这是为 Node.js 环境打包
  entry: './src/server.js', // 服务器端入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server.bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  externals: [nodeExternals()], // 使用 webpack-node-externals
  // 如果你使用 TypeScript, 还需要配置 resolve
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json']
  }
};

在这个配置中，我们首先引入了 webpack-node-externals。然后，在 externals 属性中，我们调用了 nodeExternals() 函数。这样，Webpack 就会自动忽略 node_modules 目录下的所有模块。

webpack-node-externals 的高级用法

webpack-node-externals 还提供了一些高级选项，可以让你更灵活地控制哪些模块应该被排除在外。

whitelist: 指定一个白名单，只有出现在白名单中的模块才会被打包进 bundle。其他模块会被视为 externals。
```
externals: [nodeExternals({
  whitelist: ['vue', 'vue-router'] // 只打包 vue 和 vue-router
})]
```
modulesDir: 指定 node_modules 目录的位置。默认情况下，webpack-node-externals 会在当前工作目录中查找 node_modules 目录。如果你的 node_modules 目录不在默认位置，可以使用这个选项来指定。
```
externals: [nodeExternals({
  modulesDir: path.resolve(__dirname, '../node_modules') // 指定 node_modules 目录的位置
})]
```
importType: 指定生成 externals 的方式。默认情况下，webpack-node-externals 会生成 commonjs 风格的 require 语句。你也可以指定其他的风格，比如 umd、amd 等。
```
externals: [nodeExternals({
  importType: 'umd' // 使用 UMD 风格的 require 语句
})]
```
allowlist (替代 whitelist): 在较新的版本中，whitelist 被 allowlist 替代。功能相同，只是名字变了。
```
 externals: [nodeExternals({
    allowlist: [/es6-promise|.(?!(?:js|json)$).{1,5}$/i]
 })]
```
上面的代码片段的 allowlist 配置使用正则表达式，允许所有以 es6-promise 开头的模块，以及所有非 JavaScript 和 JSON 的资源文件（例如 CSS、图片等）被打包到 bundle 中。

webpack-node-externals 的优缺点

任何工具都有它的优点和缺点，webpack-node-externals 也不例外。

优点：

减少 bundle 体积： 这是最主要的优点。通过排除已经存在于服务器环境中的依赖项，可以显著减少 bundle 的体积，从而加快服务器启动速度，降低内存占用。
提高打包速度： 由于需要打包的模块更少，打包速度也会相应提高。
避免版本冲突： 如果你的 SSR bundle 中包含的依赖项版本与服务器上已安装的版本不一致，可能会导致运行时错误。使用 webpack-node-externals 可以避免这种版本冲突。

缺点：

依赖服务器环境： 使用 webpack-node-externals 的前提是，服务器上必须已经安装了相应的依赖项。如果服务器上缺少某些依赖项，你的 SSR 应用就无法正常运行。
可能导致模块查找问题： 在某些情况下，webpack-node-externals 可能会导致模块查找问题。例如，如果你的项目依赖了一个私有的 npm 包，而这个包没有发布到 npm 仓库，那么 webpack-node-externals 可能会无法正确处理它。
需要手动管理服务器依赖： 你需要确保服务器上的依赖项版本与你的项目代码兼容。这需要你手动管理服务器上的依赖项，增加了运维的复杂度。

一个更复杂的例子：处理 CSS Modules 和静态资源

在使用 SSR 时，通常还需要处理 CSS Modules 和静态资源 (例如图片、字体等)。这些资源也需要被正确地加载到服务器端。

一个常见的做法是使用 file-loader 和 url-loader 来处理静态资源，并使用 css-loader 和 vue-style-loader 来处理 CSS Modules。

但是，在使用 webpack-node-externals 时，我们需要特别注意这些 loader 的配置。因为 webpack-node-externals 默认会排除所有的 node_modules 目录下的模块，包括 CSS 文件和静态资源文件。

为了解决这个问题，我们可以使用 allowlist 选项，将 CSS 文件和静态资源文件添加到白名单中，允许它们被打包进 bundle。

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  target: 'node',
  entry: './src/server.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server.bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        ]
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]?[hash]',
              esModule: false, // 避免和 vue-style-loader 冲突
              emitFile: false // 服务器端不需要生成文件
            }
          }
        ]
      }
    ]
  },
  externals: [nodeExternals({
    allowlist: [/.(css|vue|png|jpg|gif|svg)$/] // 允许 CSS 文件、Vue 组件和静态资源被打包
  })],
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json']
  }
};

在这个配置中，我们使用了正则表达式 /.(css|vue|png|jpg|gif|svg)$/ 来匹配 CSS 文件、Vue 组件和静态资源文件。这样，这些文件就可以被打包进 bundle，并在服务器端正确地加载。

表格总结：webpack-node-externals 的关键配置项

为了方便大家理解，我把 webpack-node-externals 的关键配置项总结成一个表格：

配置项	类型	描述
`whitelist` (或 `allowlist`)	`Array<string \| RegExp>`	一个白名单，只有出现在白名单中的模块才会被打包进 bundle。其他模块会被视为 externals。可以使用字符串或正则表达式来匹配模块名称。
`modulesDir`	`string`	指定 `node_modules` 目录的位置。如果你的 `node_modules` 目录不在默认位置，可以使用这个选项来指定。
`importType`	`string`	指定生成 externals 的方式。默认情况下，`webpack-node-externals` 会生成 `commonjs` 风格的 `require` 语句。你也可以指定其他的风格，比如 `umd`、`amd` 等。
`additionalModuleDirs`	`Array<string>`	一个额外的目录列表，用于查找模块。默认情况下，`webpack-node-externals` 只会在 `modulesDir` 中查找模块。如果你的模块位于其他目录中，可以使用这个选项来指定。
`moduleNameFormatter`	`(moduleName: string) => string`	一个函数，用于格式化模块名称。默认情况下，`webpack-node-externals` 会直接使用模块名称作为 externals 的名称。如果你需要对模块名称进行格式化，可以使用这个选项来指定一个函数。

最佳实践与注意事项

谨慎使用 whitelist (或 allowlist)： 只有在必要的时候才使用 whitelist (或 allowlist)。尽可能让 webpack-node-externals 自动处理所有的 node_modules 目录下的模块。
确保服务器环境与开发环境一致： 确保服务器上安装的依赖项版本与你的开发环境一致。否则，可能会导致运行时错误。
监控服务器资源占用： 使用 webpack-node-externals 可以减少 bundle 的体积，但并不能完全消除服务器的资源占用。你仍然需要监控服务器的 CPU、内存等资源占用情况，并根据实际情况进行优化。
结合 CDN 使用： 可以将一些静态资源 (例如图片、字体等) 放到 CDN 上，进一步减少服务器的压力。

总结：webpack-node-externals，SSR 的好帮手

总而言之，webpack-node-externals 是一个非常实用的工具，它可以帮助我们优化 SSR 的打包过程，减少 bundle 的体积，提高服务器启动速度，降低内存占用。虽然它有一些缺点，但只要我们合理使用，就可以充分发挥它的优势，让我们的 SSR 应用更加高效、稳定。

好了，今天的讲座就到这里。希望大家能够对 webpack-node-externals 有更深入的了解。如果有什么问题，欢迎大家提问！感谢各位的观看！

发表回复 取消回复

发表回复取消回复