在 Webpack 5 中开启懒编译（Lazy Compilation）

sxkk20082年前 (2023-11-23)知识分享101

在 webpack 5 中推出了 experiments 配置，目的是为了给用户赋能去开启并试用一些实验的特性。

由于实验特性具有相对宽松的语义版本，可能会有重大的变更，所以你需要将 webpack 的版本固定为小版本号，例如与其使用 webpack: ~5.4.3 不如使用 webpack: ^5.4.3 或者当使用 experiments 配置时将版本锁定。

懒编译（Lazy Compilation）是什么

Lazy Compilation 是只有在用户访问时才编译，包含 2 点，使用入口点和动态导入的代码，它适用 Web 或 Node.js。

webpack 多入口配置

module.exports = {
  //...
  entry: {
    app: './app.js',
    home: './home.js',
    about: './about.js',
  },
}

将代码改成动态导入

// 之前
import { add } from './math'
console.log(add(16, 26))
// 之后
import('./math').then((math) => {
  console.log(math.add(16, 26))
})

React 项目可以使用 React.lazy 动态导入

// 之前
import OtherComponent from './OtherComponent'
// 之后
const OtherComponent = React.lazy(() => import('./OtherComponent'))

module.exports = {
  //...
+  experiments: {
+    lazyCompilation: true,
+  },
};

lazyCompilation 的可配置参数

boolean

开启为 true，包含入口和动态加载懒编译

object

{
// define a custom backend
backend?: ((
  compiler: Compiler,
  callback: (err?: Error, api?: BackendApi) => void
  ) => void)
  | ((compiler: Compiler) => Promise<BackendApi>)
  | {
    /**
     * A custom client.
    */
    client?: string;
    /**
     * Specify where to listen to from the server.
     */
    listen?: number | ListenOptions | ((server: typeof Server) => void);
    /**
     * Specify the protocol the client should use to connect to the server.
     */
    protocol?: "http" | "https";
    /**
     * Specify how to create the server handling the EventSource requests.
     */
    server?: ServerOptionsImport | ServerOptionsHttps | (() => typeof Server);
},
entries?: boolean,
imports?: boolean,
test?: string | RegExp | ((module: Module) => boolean)
}

backend：配置修改自定义后端，默认是 webpack dev-server
entries: 是否开启入口访问懒加载
imports 5.20.0+:是否开启动态导入的代码懒编译
test 5.20.0+: 指定哪些动态导入的模块需要懒编译

比如可以改成这样，将多入口改成懒编译，忽略动态导入的代码

module.exports = {
  // …
  experiments: {
    lazyCompilation: {
      imports: false,
      entries: true,
    },
  },
}

效果

我的项目有 10w+ 代码量，可以在 2s 内启动启动效果

然后当再次输入 url 时，会再次编译，速度比 vite 了，不同的是 vite 是将 node_modules 预构建的。

输入url时再次编译

若在开启 webpack5 的文件缓存，将会非常快，当出入 url 时候就编译好看，几乎不需要等候编译

module.exports = {
  // …
  {
      type: 'filesystem',
      cacheDirectory: path.resolve('node_modules/.cache'),
      store: 'pack',
      ...
    }
};