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

2020 年 2 月 18 日技术Web 开发约 1 分钟

webpak

本文将介绍使用 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 进行无缓存配置。

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;
  }
}