Trang này được dịch bởi Cloud Translation API.

Sử dụng bộ nhớ đệm trong thời gian dài

Cách gói web hỗ trợ việc lưu tài sản vào bộ nhớ đệm

Ivan Akulov

Điều tiếp theo (sau khi tối ưu hoá kích thước ứng dụng mà cải thiện thời gian tải ứng dụng vào bộ nhớ đệm. Hãy sử dụng bảng điều khiển này để giữ các phần của ứng dụng trên và tránh tải lại chúng mỗi lần.

Sử dụng tiêu đề bộ nhớ đệm và tạo phiên bản gói

Phương pháp phổ biến của việc lưu vào bộ nhớ đệm là:

yêu cầu trình duyệt lưu tệp vào bộ nhớ đệm trong một thời gian rất dài (ví dụ: một năm):
```
# Server header
Cache-Control: max-age=31536000
```
Nếu bạn chưa biết về Cache-Control, hãy xem bài đăng của Jake Archibald bài đăng xuất sắc khi lưu vào bộ nhớ đệm hiệu quả nhất thực tiễn.

và đổi tên tệp khi tệp được thay đổi để buộc tải xuống lại:

<!-- Before the change -->
<script src="./index-v15.js"></script>

<!-- After the change -->
<script src="./index-v16.js"></script>

Phương pháp này yêu cầu trình duyệt tải tệp JS xuống, lưu vào bộ nhớ đệm và sử dụng bản sao được lưu vào bộ nhớ đệm. Trình duyệt sẽ chỉ kết nối mạng chỉ khi tên tệp thay đổi (hoặc nếu một năm trôi qua).

Với webpack, bạn làm tương tự, nhưng thay vì số phiên bản, bạn chỉ định hàm băm tệp. Để đưa hàm băm vào tên tệp, hãy sử dụng [chunkhash]:

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.[chunkhash].js' // → bundle.8e0d62a03.js
  }
};

Nếu bạn cần tên tệp để gửi đến máy khách, hãy sử dụng HtmlWebpackPlugin hoặc WebpackManifestPlugin.

HtmlWebpackPlugin là một phương pháp tiếp cận đơn giản, nhưng ít linh hoạt hơn. Trong quá trình biên dịch, trình bổ trợ này sẽ tạo một HTML chứa tất cả các tài nguyên đã biên dịch. Nếu logic máy chủ của bạn không phức tạp, thì chỉ số này đủ cho bạn:

<!-- index.html -->
<!DOCTYPE html>
<!-- ... -->
<script src="bundle.8e0d62a03.js"></script>

Chiến lược phát hành đĩa đơn WebpackManifestPlugin là một phương pháp linh hoạt hơn, hữu ích nếu bạn có một phần máy chủ phức tạp. Trong quá trình tạo bản dựng, hệ thống sẽ tạo một tệp JSON kèm theo mối liên kết giữa các tên tệp mà không có hàm băm và tên tệp có hàm băm. Hãy dùng tệp JSON này trên máy chủ để tìm hiểu tệp nào sẽ làm việc với:

// manifest.json
{
  "bundle.js": "bundle.8e0d62a03.js"
}

Tài liệu đọc thêm

Jake Archibald giới thiệu về cách lưu vào bộ nhớ đệm hiệu quả nhất thực tiễn

Trích xuất các phần phụ thuộc và thời gian chạy vào một tệp riêng

Phần phụ thuộc

Các phần phụ thuộc của ứng dụng có xu hướng ít thay đổi hơn so với mã ứng dụng thực tế. Nếu bạn chuyển chúng vào một tệp riêng biệt, trình duyệt sẽ có thể lưu chúng vào bộ nhớ đệm riêng – và sẽ không tải lại chúng xuống mỗi khi mã ứng dụng thay đổi.

Để trích xuất các phần phụ thuộc thành một phân đoạn riêng biệt, hãy thực hiện 3 bước:

Thay thế tên tệp đầu ra bằng [name].[chunkname].js:
```
// webpack.config.js
module.exports = {
  output: {
    // Before
    filename: 'bundle.[chunkhash].js',
    // After
    filename: '[name].[chunkhash].js'
  }
};
```
Khi tạo ứng dụng, webpack sẽ thay thế [name] với tên của một đoạn. Nếu không thêm phần [name], chúng ta sẽ có để phân biệt giữa các đoạn theo hàm băm của chúng – điều này khá khó!
Chuyển đổi trường entry thành một đối tượng:
```
// webpack.config.js
module.exports = {
  // Before
  entry: './index.js',
  // After
  entry: {
    main: './index.js'
  }
};
```
Trong đoạn mã này, "main" là tên của một đoạn. Tên này sẽ được thay thế trong vị trí của [name] ở bước 1.

Đến đây, nếu bạn tạo ứng dụng thì phần này sẽ bao gồm toàn bộ mã ứng dụng – chỉ như chúng tôi chưa thực hiện các bước này. Nhưng điều này sẽ thay đổi sau giây lát.
Trong webpack 4, hãy thêm tuỳ chọn optimization.splitChunks.chunks: 'all' vào cấu hình webpack:
```
// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};
```
Tuỳ chọn này sẽ bật chế độ phân tách mã thông minh. Với hàm này, webpack sẽ trích xuất mã nhà cung cấp nếu nó lớn hơn 30 kB (trước khi rút gọn và gzip). Thao tác này cũng sẽ trích xuất mã chung – điều này rất hữu ích nếu bản dựng của bạn tạo ra nhiều gói (ví dụ: nếu bạn chia ứng dụng thành các tuyến).

Trong webpack 3, hãy thêm CommonsChunkPlugin:
```
// webpack.config.js (for webpack 3)
module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    // A name of the chunk that will include the dependencies.
    // This name is substituted in place of [name] from step 1
    name: 'vendor',

    // A function that determines which modules to include into this chunk
    minChunks: module => module.context && module.context.includes('node_modules'),
    })
  ]
};
```
Trình bổ trợ này lấy tất cả các mô-đun có đường dẫn bao gồm node_modules và di chuyển chúng vào một tệp riêng biệt có tên vendor.[chunkhash].js.

Sau những thay đổi này, mỗi bản dựng sẽ tạo hai tệp thay vì một tệp: main.[chunkhash].js và vendor.[chunkhash].js (vendors~main.[chunkhash].js cho gói web 4). Đối với webpack 4, gói nhà cung cấp có thể không được tạo nếu các phần phụ thuộc có quy mô nhỏ – và điều này không sao:

$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
                        Asset      Size  Chunks             Chunk Names
 ./main.00bab6fd3100008a42b0.js   82 kB       0  [emitted]  main
./vendor.d9e134771799ecdf9483.js  47 kB       1  [emitted]  vendor

Trình duyệt sẽ lưu các tệp này vào bộ nhớ đệm riêng – và chỉ tải xuống lại mã thay đổi.

Mã thời gian chạy gói web

Rất tiếc, việc chỉ trích xuất mã của nhà cung cấp là chưa đủ. Nếu bạn cố gắng thay đổi nội dung nào đó trong mã ứng dụng:

// index.js
…
…

// E.g. add this:
console.log('Wat');

bạn sẽ nhận thấy hàm băm vendor cũng thay đổi:

                           Asset   Size  Chunks             Chunk Names
./vendor.d9e134771799ecdf9483.js  47 kB       1  [emitted]  vendor

↓

                            Asset   Size  Chunks             Chunk Names
./vendor.e6ea4504d61a1cc1c60b.js  47 kB       1  [emitted]  vendor

Điều này xảy ra do gói webpack, ngoài mã của các mô-đun, có một thời gian chạy – một đoạn mã nhỏ quản lý việc thực thi mô-đun. Khi bạn chia mã thành nhiều tệp, Đoạn mã này sẽ bắt đầu bao gồm một ánh xạ giữa mã phân đoạn và các tệp tương ứng:

// vendor.e6ea4504d61a1cc1c60b.js
script.src = __webpack_require__.p + chunkId + "." + {
    "0": "2f2269c7f0a55a5c1871"
}[chunkId] + ".js";

Webpack đưa thời gian chạy này vào phân đoạn được tạo gần đây nhất, tức là vendor trong trường hợp của chúng ta. Và mỗi lần bất kỳ đoạn nào thay đổi, đoạn mã này cũng sẽ thay đổi khiến toàn bộ phần vendor thay đổi.

Để giải quyết vấn đề này, hãy chuyển môi trường thời gian chạy vào một tệp riêng. Trong webpack 4, đây là bạn có thể thực hiện bằng cách bật tuỳ chọn optimization.runtimeChunk:

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    runtimeChunk: true
  }
};

Trong webpack 3, hãy thực hiện việc này bằng cách tạo thêm một phân đoạn trống bằng CommonsChunkPlugin:

// webpack.config.js (for webpack 3)
module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: module => module.context && module.context.includes('node_modules')
    }),
    // This plugin must come after the vendor one (because webpack
    // includes runtime into the last chunk)
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      // minChunks: Infinity means that no app modules
      // will be included into this chunk
      minChunks: Infinity
    })
  ]
};

Sau những thay đổi này, mỗi bản dựng sẽ tạo 3 tệp:

$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
                            Asset     Size  Chunks             Chunk Names
   ./main.00bab6fd3100008a42b0.js    82 kB       0  [emitted]  main
 ./vendor.26886caf15818fa82dfa.js    46 kB       1  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime

Đưa chúng vào index.html theo thứ tự ngược lại – thế là bạn đã hoàn tất:

<!-- index.html -->
<script src="./runtime.79f17c27b335abc7aaf4.js"></script>
<script src="./vendor.26886caf15818fa82dfa.js"></script>
<script src="./main.00bab6fd3100008a42b0.js"></script>

Tài liệu đọc thêm

Hướng dẫn về gói web về việc lưu vào bộ nhớ đệm trong thời gian dài
Tài liệu về webpack về thời gian chạy webpack và tệp kê khai
"Khai thác tối đa CommonsChunkPlugin"
Cách hoạt động của optimization.splitChunks và optimization.runtimeChunk

Môi trường thời gian chạy gói web nội tuyến để lưu thêm yêu cầu HTTP

Để làm cho mọi thứ tốt hơn nữa, hãy thử đặt thời gian chạy webpack vào HTML của bạn. Tức là, thay vì:

<!-- index.html -->
<script src="./runtime.79f17c27b335abc7aaf4.js"></script>

thực hiện việc này:

<!-- index.html -->
<script>
!function(e){function n(r){if(t[r])return t[r].exports;…}} ([]);
</script>

Môi trường thời gian chạy nhỏ và việc đặt cùng dòng sẽ giúp bạn lưu yêu cầu HTTP quan trọng với HTTP/1; kém quan trọng hơn với HTTP/2 nhưng vẫn có thể đóng vai trò hiệu ứng).

Sau đây là cách thực hiện.

Nếu bạn tạo HTML bằng htmlWebpackPlugin

Nếu bạn sử dụng HtmlWebpackPlugin cần tạo một tệp HTML, InlineSourcePlugin là tất cả những gì bạn cần:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      inlineSource: 'runtime~.+\\.js',
    }),
    new InlineSourcePlugin()
  ]
};

Nếu bạn tạo HTML bằng logic máy chủ tuỳ chỉnh

Với gói web 4:

Thêm WebpackManifestPlugin để biết tên được tạo của đoạn thời gian chạy:

// webpack.config.js (for webpack 4)
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  plugins: [
    new ManifestPlugin()
  ]
};

Bản dựng với trình bổ trợ này sẽ tạo một tệp có dạng như sau:

// manifest.json
{
  "runtime~main.js": "runtime~main.8e0d62a03.js"
}

Đưa nội dung của phân đoạn thời gian chạy vào cùng dòng một cách thuận tiện. Ví dụ: với Node.js và Express:

// server.js
const fs = require('fs');
const manifest = require('./manifest.json');
const runtimeContent = fs.readFileSync(manifest['runtime~main.js'], 'utf-8');

app.get('/', (req, res) => {
  res.send(`
    …
    <script>${runtimeContent}</script>
    …
  `);
});

Hoặc với webpack 3:

Đặt tên thời gian chạy ở dạng tĩnh bằng cách chỉ định filename:

module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      minChunks: Infinity,
      filename: 'runtime.js'
    })
  ]
};

Đưa nội dung runtime.js vào cùng dòng theo cách thuận tiện. Ví dụ: với Node.js và Express:

// server.js
const fs = require('fs');
const runtimeContent = fs.readFileSync('./runtime.js', 'utf-8');

app.get('/', (req, res) => {
  res.send(`
    …
    <script>${runtimeContent}</script>
    …
  `);
});

Mã tải từng phần mà bạn không cần ngay lúc này

Đôi khi, một trang có nhiều phần quan trọng và ít quan trọng hơn:

Nếu tải một trang video trên YouTube, bạn sẽ quan tâm đến video hơn là nhận xét. Ở đây, video quan trọng hơn bình luận.
Nếu mở một bài viết trên một trang web tin tức, bạn sẽ quan tâm nhiều hơn đến nội dung của hơn là về quảng cáo. Ở đây, văn bản quan trọng hơn quảng cáo.

Trong các trường hợp như vậy, hãy cải thiện hiệu suất tải ban đầu bằng cách chỉ tải xuống nội dung quan trọng nhất trước rồi tải từng phần các phần còn lại sau. Sử dụng Hàm import() và code-splitting trong trường hợp này:

// videoPlayer.js
export function renderVideoPlayer() { … }

// comments.js
export function renderComments() { … }

// index.js
import {renderVideoPlayer} from './videoPlayer';
renderVideoPlayer();

// …Custom event listener
onShowCommentsClick(() => {
  import('./comments').then((comments) => {
    comments.renderComments();
  });
});

import() chỉ định rằng bạn muốn tải động một mô-đun cụ thể. Thời gian webpack thấy import('./module.js'), nó sẽ di chuyển mô-đun này vào một chunk:

$ webpack
Hash: 39b2a53cb4e73f0dc5b2
Version: webpack 3.8.1
Time: 4273ms
                            Asset     Size  Chunks             Chunk Names
      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
   ./main.f7e53d8e13e9a2745d6d.js    60 kB       1  [emitted]  main
 ./vendor.4f14b6326a80f4752a98.js    46 kB       2  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime

và chỉ tải tệp đó xuống khi quá trình thực thi đến hàm import().

Thao tác này sẽ làm cho gói main nhỏ hơn, cải thiện thời gian tải ban đầu. Hơn nữa, nó còn cải thiện khả năng lưu vào bộ nhớ đệm – nếu bạn thay đổi mã trong đoạn chính, phần bình luận sẽ không bị ảnh hưởng.

Lưu ý: Nếu biên dịch mã này bằng iMessage, bạn sẽ gặp lỗi cú pháp vì Squarespace không hiểu import() ngay từ đầu. Để tránh lỗi này, hãy thêm trình bổ trợ syntax-dynamic-import.

Tài liệu đọc thêm

Tài liệu về gói web dành cho import() hàm
Đề xuất JavaScript để triển khai import() cú pháp

Chia mã thành các tuyến và trang

Nếu ứng dụng của bạn có nhiều tuyến hoặc trang, nhưng chỉ có một tệp JS duy nhất có mã (một phần main), có thể bạn đang phân phát thêm byte trên từng yêu cầu. Ví dụ: khi người dùng truy cập vào trang chủ trên trang web của bạn:

Trang chủ về các nguyên tắc cơ bản về web

họ không cần tải mã để hiển thị một bài viết trên nhưng họ sẽ tải trang đó. Hơn nữa, nếu người dùng luôn chỉ ghé thăm nhà và bạn thực hiện thay đổi trong mã bài viết, thì webpack sẽ vô hiệu hoá toàn bộ gói – và người dùng sẽ phải tải lại toàn bộ ứng dụng xuống.

Nếu chúng ta chia ứng dụng thành các trang (hoặc các tuyến, nếu là ứng dụng một trang), người dùng sẽ chỉ tải xuống mã có liên quan. Ngoài ra, trình duyệt sẽ lưu mã ứng dụng vào bộ nhớ đệm tốt hơn: nếu bạn thay đổi mã trang chủ, webpack sẽ chỉ vô hiệu hoá phân đoạn tương ứng.

Đối với ứng dụng trang đơn

Để chia các ứng dụng trang đơn theo tuyến đường, hãy sử dụng import() (xem Mã “Tải từng phần” mà bạn không cần ngay lúc này"). Nếu bạn dùng một khung, thì có thể giải pháp hiện có cho việc này:

"Mã đang tách" trong tài liệu của react-router (cho React)
"Tải từng phần Tuyến đường" ở Tài liệu của vue-router (dành cho Vue.js)

Đối với ứng dụng nhiều trang truyền thống

Để chia các ứng dụng truyền thống theo trang, hãy sử dụng mục nhập của webpack điểm. Nếu ứng dụng của bạn có 3 các loại trang: trang chủ, trang bài viết và trang tài khoản người dùng, – nó phải có ba mục nhập:

// webpack.config.js
module.exports = {
  entry: {
    home: './src/Home/index.js',
    article: './src/Article/index.js',
    profile: './src/Profile/index.js'
  }
};

Đối với mỗi tệp mục nhập, webpack sẽ tạo một cây phần phụ thuộc riêng và tạo một gói chỉ bao gồm các mô-đun mà mục nhập đó sử dụng:

$ webpack
Hash: 318d7b8490a7382bf23b
Version: webpack 3.8.1
Time: 4273ms
                            Asset     Size  Chunks             Chunk Names
      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
   ./home.91b9ed27366fe7e33d6a.js    18 kB       1  [emitted]  home
./article.87a128755b16ac3294fd.js    32 kB       2  [emitted]  article
./profile.de945dc02685f6166781.js    24 kB       3  [emitted]  profile
 ./vendor.4f14b6326a80f4752a98.js    46 kB       4  [emitted]  vendor
./runtime.318d7b8490a7382bf23b.js  1.45 kB       5  [emitted]  runtime

Vì vậy, nếu chỉ có trang bài viết sử dụng Lodash, thì gói home và profile sẽ không bao gồm thư viện này – và người dùng sẽ không phải tải thư viện này xuống khi truy cập vào trang chủ.

Tuy nhiên, các cây phụ thuộc riêng biệt vẫn có một số hạn chế. Nếu hai điểm truy cập sử dụng Lodash và bạn chưa di chuyển các phần phụ thuộc vào gói nhà cung cấp, cả mục nhập sẽ bao gồm cả một bản sao của Lodash. Để giải quyết vấn đề này, trong webpack 4, hãy thêm thuộc tính Tuỳ chọn optimization.splitChunks.chunks: 'all' vào cấu hình gói web:

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

Tuỳ chọn này sẽ bật chế độ phân tách mã thông minh. Với lựa chọn này, webpack sẽ tự động tìm mã chung và giải nén mã đó thành các tệp riêng biệt.

Hoặc trong webpack 3, sử dụng CommonsChunkPlugin – thao tác này sẽ di chuyển các phần phụ thuộc phổ biến vào một tệp mới được chỉ định:

module.exports = {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2    // 2 is the default value
    })
  ]
};

Bạn có thể thử với giá trị minChunks để tìm ra giá trị phù hợp nhất. Nhìn chung, bạn muốn giữ nguyên kích thước nhỏ, nhưng sẽ tăng lên nếu số lượng phần tăng lên. Để Ví dụ: đối với 3 phân đoạn, minChunks có thể là 2, nhưng đối với 30 phân đoạn, giá trị này có thể là 8 – vì nếu bạn để tệp ở mức 2, quá nhiều mô-đun sẽ nằm trong tệp chung, tăng cường quá nhiều.

Tài liệu đọc thêm

Tài liệu về gói web về khái niệm nhập điểm
Tài liệu Webpack về CommonsChunkPlugin
"Khai thác tối đa CommonsChunkPlugin"
Cách hoạt động của optimization.splitChunks và optimization.runtimeChunk

Làm cho mã nhận dạng mô-đun ổn định hơn

Khi tạo mã, webpack sẽ gán một mã nhận dạng cho mỗi mô-đun. Sau đó, các mã nhận dạng này được dùng trong require() bên trong gói. Bạn thường thấy mã nhận dạng trong kết quả của bản dựng ngay trước đường dẫn mô-đun:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
                           Asset      Size  Chunks             Chunk Names
      ./0.8ecaf182f5c85b7a8199.js  22.5 kB       0  [emitted]
   ./main.4e50a16675574df6a9e9.js    60 kB       1  [emitted]  main
 ./vendor.26886caf15818fa82dfa.js    46 kB       2  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime

↓ Tại đây

[0] ./index.js 29 kB {1} [built]
[2] (webpack)/buildin/global.js 488 bytes {2} [built]
[3] (webpack)/buildin/module.js 495 bytes {2} [built]
[4] ./comments.js 58 kB {0} [built]
[5] ./ads.js 74 kB {1} [built]
+ 1 hidden module

Theo mặc định, mã nhận dạng được tính bằng bộ đếm (tức là mô-đun đầu tiên có mã nhận dạng là 0, danh sách thứ hai có mã nhận dạng 1, v.v.). Vấn đề là khi bạn thêm một mô-đun mới, nó có thể xuất hiện ở giữa danh sách mô-đun, thay đổi tất cả các mô-đun tiếp theo Mã:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
                           Asset      Size  Chunks             Chunk Names
      ./0.5c82c0f337fcb22672b5.js    22 kB       0  [emitted]
   ./main.0c8b617dfc40c2827ae3.js    82 kB       1  [emitted]  main
 ./vendor.26886caf15818fa82dfa.js    46 kB       2  [emitted]  vendor
./runtime.79f17c27b335abc7aaf4.js  1.45 kB       3  [emitted]  runtime
   [0] ./index.js 29 kB {1} [built]
   [2] (webpack)/buildin/global.js 488 bytes {2} [built]
   [3] (webpack)/buildin/module.js 495 bytes {2} [built]

↓ Chúng tôi đã thêm một mô-đun...

[4] ./webPlayer.js 24 kB {1} [built]

↓ Và xem những gì Bard đã làm được! comments.js hiện có mã nhận dạng 5 thay vì 4

[5] ./comments.js 58 kB {0} [built]

↓ ads.js hiện có mã nhận dạng 6 thay vì 5

[6] ./ads.js 74 kB {1} [built]
       + 1 hidden module

Thao tác này làm mất hiệu lực của tất cả các phần bao gồm hoặc phụ thuộc vào các mô-đun có mã nhận dạng đã thay đổi – ngay cả khi mã thực tế của họ không thay đổi. Trong trường hợp này, đoạn 0 (đoạn với comments.js) và đoạn main (đoạn có mã ứng dụng khác) sẽ nhận được không hợp lệ – trong khi lẽ ra chỉ nên có main.

Để giải quyết vấn đề này, hãy thay đổi cách tính mã mô-đun bằng cách sử dụng HashedModuleIdsPlugin. Phương thức này thay thế các mã nhận dạng dựa trên bộ đếm bằng hàm băm của các đường dẫn mô-đun:

$ webpack
Hash: df3474e4f76528e3bbc9
Version: webpack 3.8.1
Time: 2150ms
                           Asset      Size  Chunks             Chunk Names
      ./0.6168aaac8461862eab7a.js  22.5 kB       0  [emitted]
   ./main.a2e49a279552980e3b91.js    60 kB       1  [emitted]  main
 ./vendor.ff9f7ea865884e6a84c8.js    46 kB       2  [emitted]  vendor
./runtime.25f5d0204e4f77fa57a1.js  1.45 kB       3  [emitted]  runtime

↓ Tại đây

[3IRH] ./index.js 29 kB {1} [built]
[DuR2] (webpack)/buildin/global.js 488 bytes {2} [built]
[JkW7] (webpack)/buildin/module.js 495 bytes {2} [built]
[LbCc] ./webPlayer.js 24 kB {1} [built]
[lebJ] ./comments.js 58 kB {0} [built]
[02Tr] ./ads.js 74 kB {1} [built]
    + 1 hidden module

Với phương pháp này, mã nhận dạng của mô-đun chỉ thay đổi nếu bạn đổi tên hoặc di chuyển mô-đun đó . Các mô-đun mới sẽ không ảnh hưởng đến các mô-đun khác Mã nhận dạng.

Để bật trình bổ trợ này, hãy thêm trình bổ trợ này vào phần plugins của cấu hình:

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.HashedModuleIdsPlugin()
  ]
};

Tài liệu đọc thêm

Tài liệu Webpack về HashedModuleIdsPlugin

Tổng hợp

Lưu gói vào bộ nhớ đệm và phân biệt các phiên bản bằng cách thay đổi tên gói
Chia gói thành mã ứng dụng, mã nhà cung cấp và thời gian chạy
Thêm vào cùng dòng thời gian chạy để lưu yêu cầu HTTP
Tải từng phần mã không quan trọng bằng import
Chia mã theo tuyến/trang để tránh tải nội dung không cần thiết