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

1.Tạo các file bundle cho ứng dụng của bạn Để làm bước này, bạn cần cài đặt DllReferencePlugin và thêm nó vào danh sách các plugins tương ứng với từng thư viện bạn của bundle. DllReferencePlugin có nhiệm vụ xác định đường dẫn của file manifest mà chúng ta vừa tạo ra bằng DllPlugin để tìm các module. Khi webpack thấy bạn dùng require() , đầu tiên webpack sẽ check các dlls xem là có code này không. Nếu có, 1 module trỏ đến Dll sẽ được tạo. Nếu không, các file mà bạn yêu cầu sẽ được gói vào trong bundle như bình thường. Đây là config của DllReferencePlugin

// app.webpack.config.js
var webpack = require('webpack')

module.exports = {
  entry: {
    app: './src/index'
  },

  plugins: [
    new webpack.DllReferencePlugin({
      context: '.',
      manifest: require('./dist/jquery-manifest.json')
    }),
    new webpack.DllReferencePlugin({
      context: '.',
      manifest: require('./dist/angular-manifest.json')
    }),
  ]
}

Nếu bạn quan sát file bundle vừa được tạo, ta sẽ thấy có những dòng như sau:

// in your module
var angular = __webpack_require__(2)

/* 2 */
// get a reference to the bundle containing 'angular',
// then require module (1) from that
module.exports = (__webpack_require__(3))(1)

/* 3 */
// re-export the global variable created by the library
// bundle
module.exports = angular_lib

1. So sánh với các phương pháp tách code khác Ngoài Dllplugin , chúng ta có rất nhiều các cơ chế và plugin dùng để tách code khác trên webpack. Ví dụ như a)CommonsChunkPlugin giúp code của chúng ta được chia sẽ giữa các bundle với nhau và gói nó vào 1 bundle riêng biệt. Lợi thế của phương pháp này là bạn không cần quan tâm dòng code nào được đặt vào bundle nào, webpack sẽ tự động làm điều đó cho bạn Bạn có thế tự xác định thư viện nào đặt ở 1 mảnh nào và đây là 1 phương pháp hay nếu bạn chỉ có 1 lượng vendor code vừa phải Ngoài ra, nó còn có lợi thế là bạn chỉ cần config webpack 1 lần và bật lợi là đối với 1 project to, các commons chunk sẽ recompiled lại mỗi lần bạn chạy webpack b)Code splitting thông qua require.ensure(), nó cho phép chúng ta lazy-load các chunks như việc sử dụng các trang đặc biệt hoặc 1 feature. Điều này rất hữu ích trong việc tối ưu thời gian khởi tạo trang web bằng cách giữ lại các bundle chính thật nhỏ và sau đó tải chúng về theo nhu cầu sử dụng Nguồn