webpack 前端项目的最小更新的配置方法

本文将介绍使用 webpack 打包的 web 应用如何在更新时只需下载有变动的模块。

webpack 的默认输出

webpack 用于编译 javascript 模块。默认为 entry 配置中指定的每一个入口文件，输出每个入口文件引用的所有模块打包的 js 文件，共同引用的模块将被打包到每个入口的打包文件。

本文的 webpack 特指 webpakc v4。

代码分离

wepack 提供了 SplitChunksPlugin 分离代码，在 webpack 配置中加入 optimization.splitChunks 配置：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: "all",
    },
  },
};

共用的模块将被抽出单独打包成 js 文件。

如果我们使用 import() 懒加载模块，此模块也将被单独打包 js 文件。

输出 content hash 文件名

为了达到最小更新的的目的，关键就是缓存没有更新的模块。

为了缓存模块，需要让输出文件的文件名在内容不变的情况下不发生改变。在 webpack 的 output 配置中使用 contenthash 占位符指定输出文件名，根据内容计算文件名称：

module.exports = {
  //...
  output: {
    //...
    filename: "[name].[contenthash].js",
    chunkFilename: "[name].[contenthash].js",
  },
};

Nginx 缓存配置

以 nginx 为例配置资源缓存。

对 index.html 进行无缓存配置。

1
2
3

location = /index.html {
  add_header Cache-Control "no-cache, no-store";
}

其它资源文件设置一个较长时间的缓存

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
  expires  1y;
}
location ~ .*\.(js|css)?$
{
  expires  1y;
}

最小化前端项目更新的工作完成。

server {
  listen      [::]:80;
  server_name    server-name.com;
  root           /var/www/html;
  index          index.html;
  try_files $uri /index.html;

  location = /index.html {
    add_header Cache-Control "no-cache, no-store";
  }

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
  {
    expires  1y;
  }
  location ~ .*\.(js|css)?$
  {
    expires  1y;
  }
}

优缺点

优点

发布的时，服务器上有相同的路径和文件名的文件可以不传输，实现增量发布。
用户在回访网站的时候，未更新的模块将保持缓存，实现缓存效益最大化，大大增加加载速度。

缺点

用户在首次访问加载时会略微增加下载数据量。
contenthash不能在启用 HMR 时使用。
一个模块更新时会导致整个引用链的更新，包含这个模块应用链的输出文件都需要更新。

Eson Wong's Blog

webpack 前端项目的最小更新的配置方法

webpack 的默认输出

代码分离

输出 content hash 文件名

Nginx 缓存配置

优缺点

优点

缺点

参考