前端靜態資源自動化處理版本號防緩存

時間 2019-11-08

原文原文鏈接

前端靜態資源自動化處理版本號防緩存

瀏覽器會默認緩存網站的靜態資源文件，如：js文件、css文件、圖片等。緩存帶來網站性能提高的同時也帶來了一些困擾，最多見的問題就是不能及時更新靜態資源，形成新版本發佈時用戶沒法及時看到新版本的變化，嚴重影響了用戶體驗。javascript

上述問題，最簡單的辦法就是在資源的請求路徑上添加版本號，格式以下：css

url?v=1.0.0

每次在更改資源的時候，手動修改版本號，可是每次手動改那麼多後綴有些費事，如今有不少的工具可讓咱們更輕鬆的完成這項工具。本文將探討使用目前最流行的前端構建工具 Gulp 和 Webpack 自動化爲靜態資源添加版本號防緩存處理。html

使用 Gulp 處理文件版本

Gulp 是一個簡單易用的前端自動化構建工具，很是適合於構建多頁面的工做流程。前端

安裝 Gulp（這裏使用的是 Gulp 4+ 版本）：java

$ npm install --save-dev gulp

安裝 gulp-rev 插件：webpack

$ npm install --save-dev gulp-rev

gulp-rev 插件的做用就是爲靜態資源添加版本號。git

新建 gulpfile.js 文件：github

const gulp = require('gulp');
const rev = require('gulp-rev');

// 添加版本號
gulp.task('rev', () => {
  return gulp.src('src/css/*.css')
    .pipe(rev()) // 將全部匹配到的文件名所有生成相應的版本號
    .pipe(gulp.dest('dist/css'))
    .pipe(rev.manifest()) //把全部生成的帶版本號的文件名保存到rev-manifest.json文件中
    .pipe(gulp.dest('rev/css')) //把rev-manifest.json文件保存到指定的路徑
});

執行 rev 任務後，rev/css 文件加下多了一個 rev-manifest.json 文件。web

rev-manifest.json 文件的內容以下：npm

{
  "index.css": "index-35c63c1fbe.css"
}

而後，安裝 gulp-rev-collector 插件：

$ npm install --save-dev gulp-rev-collector

gulp-rev-collector 插件主要是配合 gulp-rev 替換文件版本號。

修改 gulpfile.js 文件：

const gulp = require('gulp');
const rev = require('gulp-rev');

// 添加版本號
gulp.task('rev', () => {
  return gulp.src('src/css/*.css')
    .pipe(rev()) // 將全部匹配到的文件名所有生成相應的版本號
    .pipe(gulp.dest('dist/css'))
    .pipe(rev.manifest()) //把全部生成的帶版本號的文件名保存到rev-manifest.json文件中
    .pipe(gulp.dest('rev/css')) //把rev-manifest.json文件保存到指定的路徑
});

const revCollector = require('gulp-rev-collector');

// 控制文件版本號
gulp.task('rev-collector', () => {
  return gulp.src(['rev/**/*.json', 'src/**/*.html'])
    .pipe(revCollector({
      replaceReved: true
    }))
    .pipe(gulp.dest('dist'))
})

gulp.task('default', gulp.series('clean', 'rev', 'rev-collector'))

執行 gulp 默認任務。檢查 dist 下 index.html 文件 css 的版本是否替換成功。

使用 Webpack 處理文件版本

Webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，很是適合於構建單頁面的工做流程，固然也能夠構建多頁面的工做流程。

安裝 Webpack（這裏使用的是 webpack 4+ 版本）。

$ npm install --save-dev webpack webpack-cli

經過使用 output.filename 進行文件名替換，webpack 使用 [chunkhash] 替換文件名，在文件名中包含一個 chunk 相關(chunk-specific)的哈希。

安裝 clean-webpack-plugin 插件（清理文件夾）：

$ npm install --save-dev clean-webpack-plugin

clean-webpack-plugin 插件的做用是清理文件夾，因爲每次打包的文件版本不一樣，輸出目錄會生成不少不一樣版本的目標文件，因此須要清理文件夾。

配置文件 webpack.config.js 以下：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.[chunkhash:5].js', //這裏設置 [chunkhash] 替換文件名，數字5爲 chunkhash 的字符長度。
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(['dist'])
  ]
}

在 src 目錄新建一個 index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack實現靜態資源版本管理自動化</title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

安裝 html-webpack-plugin 插件：

$ npm install --save-dev html-webpack-plugin

html-webpack-plugin 插件編譯 html 替換帶有哈希值版本信息的資源文件。

修改 webpack.config.js 文件：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.[chunkhash:5].js', //這裏設置 [chunkhash] 替換文件名，數字5爲 chunkhash 的字符長度。
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Webpack實現靜態資源版本管理自動化'
    })
  ]
}

html-webpack-plugin 默認入口文件爲 index.html，具體的參數配置請參考https://www.npmjs.com/package/html-webpack-plugin。
關於 Webpack 處理緩存的更多教程請移步官方文檔。