Tối ưu thời gian build và cải thiện caching với thư viện Webpack DLL - Part 1

1. Giới thiệu Webpack cung cấp 2 thư viện để chúng ta có thể chia dự án JavaScript ra thành từng file nhỏ có khả năng compile 1 cách độc lập. Đó Là Webpack Dll và DllReference 2 thư viên này sẽ giúp lập trình viên tối ưu hóa thời gian build app và tăng cường khả năng caching bằng cách nhóm các thư viện mà chúng ta ít khi thay đổi thành 1 bundle riêng biệt DLL là viết tắt của Dynamically Linked Library. Đây là 1 tính năng dùng trong ứng dụng của Windows, dùng để giải quyết vấn đề trên. Ví dụ: Project của bạn sử dụng các thư viện lớn hoặc frameworks như JQuery, Angular hoặc React. Những thư viện này chúng ta ít khi thay đổi. Ngoài ra còn có 1 số thư viện hữu dụng khác như underscore hoặc lodahs. Những thư viện này thực sự rất ít khi lập trình viên sửa đôi chúng. Với Webpack DLLL, nó cho phép bạn đưa các thư viện thiện ích thành 1 bundle. Các frameworks và application của bạn thành 1 bundle khác. Việc làm này sẽ đem lại 1 số lợi ích sau:

• Tách việc compile các library riêng biệt ra khỏi application bundle. Điều này sẽ giúp trong thời gian phát triển ứng dụng, ban chỉ cần compile các thư viện này 1 lần. Và sau đó chạy Webpack ở chế độ -watch để recompile application khi thay đổi code của application. Do đó application bundle sẽ nhỏ đi và thời gian build sẽ nhanh hơn.
• Khi người dùng load ứng dụng của bạn. họ sẽ chỉ cần tải về những bundle bị thay đổi -Tránh trường hợp các config của application bundle trởi nên lộn xộn với các plugins và loader ... Có nghĩa là bạn chỉ cần vendor bundle và phần còn lại. Điều này sẽ giúp cải thiện tốc độ build và khả năng bảo trì Lợi ích của việc sử dụng Webpack library bundles là bạn có thê lưa chọn các cách đưa modules để bundles và cách nó hoạt động với những libraries được sử dụng trong npm và require. 2.Tạo Library Bundles Để phân chia code của bạn thành library và application bundles. Bạn cần tạo 2 file config cho webppack. 1 cái dùng cho library bundles và 1 dùng cho application bundles Trong file config của library bundles, chúng ta thêm DLLPlugin vào danh sách các plugins. DLLPlugin thực hiện 2 việc :
• Tạo các hàm require thông qua biến toàn cục ở những page mà các bundles khác có thể require code từ nó.
• Tạo file json tên là manifest. Những file này sẽ nối đường dẫn file của các modules bên trong file bundle với các id của từng module. Application bundle sẽ dùng các file manifest này dể xác định Library bundlle có cung cấp module cụ thể nào hay không. Nếu có thì làm thế nào để truy tập nó từ các bundle khác.

// vendor-bundles.webpack.config.js
var webpack = require('webpack')

module.exports = {
  entry: {
    // create two library bundles, one with jQuery and
    // another with Angular and related libraries
    'jquery': ['jquery'],
    'angular': ['angular', 'angular-router', 'angular-sanitize']
  },

  output: {
    filename: '[name].bundle.js',
    path: 'dist/',

    // The name of the global variable which the library's
    // require() function will be assigned to
    library: '[name]_lib',
  },

  plugins: [
    new webpack.DllPlugin({
      // The path to the manifest file which maps between
      // modules included in a bundle and the internal IDs
      // within that bundle
      path: 'dist/[name]-manifest.json',
      // The name of the global variable which the library's
      // require function has been assigned to. This must match the
      // output.library option above
      name: '[name]_lib'
    }),
  ],
}

Các file bundle sẽ có dạng:

var angular_lib = (function (modules) {
  // Bundle bootstrap code...
})([
  // Module 0 re-exports the require function,
  // so that it becomes the value of angular_lib
  function (module, exports, __webpack_require__) {
    module.exports = __webpack_require__;
  }
])

Sau khi được tải. window.angular_lib(<id>) có thể được sử dụng bởi bất kỳ page nào goi require từ bundle này. Các module sử dung ids bên trong bundle.Nghĩa là bạn cần fine manifest để nối các đường dẫn và id File JSON manifest sẽ có cấu trúc :

{
  "name": "angular_lib",
  "content": {
    "./node_modules/angular/index.js": 1,
    ...
  }
}

Nguồn http://robertknight.github.io/posts/webpack-dll-plugins/