Giảm kích thước giao diện người dùng

Cách sử dụng webpack để tạo ứng dụng nhỏ nhất có thể

Ivan Akulov

Một trong những việc đầu tiên cần làm khi tối ưu hoá ứng dụng là làm cho ứng dụng nhỏ nhất có thể. Sau đây là cách thực hiện việc này bằng webpack.

Sử dụng chế độ sản xuất (chỉ dành cho webpack 4)

Webpack 4 đã ra mắt cờ mode mới. Bạn có thể đặt cờ này thành 'development' hoặc 'production' để gợi ý gói web mà bạn đang xây dựng ứng dụng cho một môi trường cụ thể:

// webpack.config.js
module.exports = {
  mode: 'production',
};

Hãy nhớ bật chế độ production khi bạn xây dựng ứng dụng để phát hành công khai. Điều này sẽ giúp webpack áp dụng các tính năng tối ưu hoá như rút gọn, xoá mã chỉ dành cho phát triển trong thư viện, và nhiều tính năng khác.

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

• Những nội dung cụ thể mà cờ mode định cấu hình

Bật tính năng thu nhỏ

Giảm thiểu là khi bạn nén mã bằng cách xoá các dấu cách thừa, rút ngắn tên biến, v.v. Chẳng hạn như:

// Original code
function map(array, iteratee) {
  let index = -1;
  const length = array == null ? 0 : array.length;
  const result = new Array(length);

  while (++index < length) {
    result[index] = iteratee(array[index], index, array);
  }
  return result;
}

↓

// Minified code
function map(n,r){let t=-1;for(const a=null==n?0:n.length,l=Array(a);++t<a;)l[t]=r(n[t],t,n);return l}

Webpack hỗ trợ hai cách rút gọn mã: rút gọn ở cấp gói và các tuỳ chọn dành riêng cho trình tải. Bạn nên sử dụng đồng thời cả hai tính năng này.

Giảm kích thước gói ở cấp độ gói

Việc rút gọn cấp gói sẽ nén toàn bộ gói sau khi biên dịch. Dưới đây là cách hoạt động:

1. Bạn viết mã như sau:

   // comments.js
   import './comments.css';
   export function render(data, target) {
     console.log('Rendered!');
   }
   

2. Webpack biên dịch thành khoảng như sau:

   // bundle.js (part of)
   "use strict";
   Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
   /* harmony export (immutable) */ __webpack_exports__["render"] = render;
   /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css__ = __webpack_require__(1);
   /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css_js___default =
   __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__comments_css__);
   
   function render(data, target) {
   console.log('Rendered!');
   }
   

3. Trình rút gọn sẽ nén mã này thành gần như sau:

   // minified bundle.js (part of)
   "use strict";function t(e,n){console.log("Rendered!")}
   Object.defineProperty(n,"__esModule",{value:!0}),n.render=t;var o=r(1);r.n(o)
   

Trong webpack 4, tính năng rút gọn ở cấp gói sẽ tự động bật – cả ở chế độ phát hành và không có chế độ nào. Công cụ này sử dụng trình rút gọn UglifyJS trong phần nâng cao. (Nếu cần tắt tính năng giảm thiểu, bạn chỉ cần sử dụng chế độ phát triển hoặc truyền false vào tuỳ chọn optimization.minimize.)

Trong webpack 3, bạn cần sử dụng trực tiếp trình bổ trợ UglifyJS. Trình bổ trợ này đi kèm với gói web. Để bật trình bổ trợ này, hãy thêm trình bổ trợ này vào mục plugins của cấu hình:

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
  ],
};

Tuỳ chọn dành riêng cho trình tải

Cách thứ hai để rút gọn mã là các tuỳ chọn dành riêng cho trình tải (trình tải là gì). Với các tuỳ chọn trình tải, bạn có thể nén những nội dung mà trình rút gọn không thể rút gọn. Ví dụ: khi bạn nhập tệp CSS bằng css-loader, tệp này sẽ được biên dịch thành một chuỗi:

/* comments.css */
.comment {
  color: black;
}

// minified bundle.js (part of)
exports=module.exports=__webpack_require__(1)(),
exports.push([module.i,".comment {\r\n  color: black;\r\n}",""]);

Trình rút gọn không thể nén mã này vì đây là một chuỗi. Để rút gọn nội dung tệp, chúng ta cần định cấu hình trình tải để thực hiện việc này:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { minimize: true } },
        ],
      },
    ],
  },
};

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

• Tài liệu về UglifyJsPlugin
• Các trình thu nhỏ phổ biến khác: Babel Minify, Trình biên dịch đóng của Google

Chỉ định NODE_ENV=production

Một cách khác để giảm kích thước phần giao diện người dùng là đặt biến môi trường NODE_ENV trong mã thành giá trị production.

Các thư viện sẽ đọc biến NODE_ENV để xác định chế độ nên hoạt động – trong chế độ phát triển hay phát hành công khai. Một số thư viện hoạt động theo cách khác dựa trên biến này. Ví dụ: khi không đặt NODE_ENV thành production, Vue.js sẽ thực hiện các bước kiểm tra bổ sung và in các cảnh báo:

// vue/dist/vue.runtime.esm.js
// …
if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}
// …

React hoạt động tương tự – tải một bản dựng phát triển có các cảnh báo:

// react/index.js
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

// react/cjs/react.development.js
// …
warning$3(
    componentClass.getDefaultProps.isReactClassApproved,
    'getDefaultProps is only used on classic React.createClass ' +
    'definitions. Use a static property named `defaultProps` instead.'
);
// …

Các bước kiểm tra và cảnh báo như vậy thường không cần thiết trong phiên bản chính thức, nhưng chúng vẫn tồn tại trong mã và làm tăng kích thước thư viện. Trong webpack 4, hãy xoá chúng bằng cách thêm tuỳ chọn optimization.nodeEnv: 'production':

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    nodeEnv: 'production',
    minimize: true,
  },
};

Trong webpack 3, hãy sử dụng DefinePlugin:

// webpack.config.js (for webpack 3)
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
};

Cả tuỳ chọn optimization.nodeEnv và DefinePlugin đều hoạt động theo cách tương tự – thay thế tất cả các lần xuất hiện của process.env.NODE_ENV bằng giá trị đã chỉ định. Với cấu hình như trên:

1. Webpack sẽ thay thế tất cả các lần xuất hiện process.env.NODE_ENV bằng "production":

   // vue/dist/vue.runtime.esm.js
   if (typeof val === 'string') {
     name = camelize(val);
     res[name] = { type: null };
   } else if (process.env.NODE_ENV !== 'production') {
     warn('props must be strings when using array syntax.');
   }
   

   ↓

   // vue/dist/vue.runtime.esm.js
   if (typeof val === 'string') {
     name = camelize(val);
     res[name] = { type: null };
   } else if ("production" !== 'production') {
     warn('props must be strings when using array syntax.');
   }
   

2. Sau đó, trình rút gọn sẽ xoá tất cả nhánh if như vậy – vì "production" !== 'production' luôn có giá trị false và trình bổ trợ hiểu rằng mã bên trong các nhánh này sẽ không bao giờ thực thi:

   // vue/dist/vue.runtime.esm.js
   if (typeof val === 'string') {
     name = camelize(val);
     res[name] = { type: null };
   } else if ("production" !== 'production') {
     warn('props must be strings when using array syntax.');
   }
   

   ↓

   // vue/dist/vue.runtime.esm.js (without minification)
   if (typeof val === 'string') {
     name = camelize(val);
     res[name] = { type: null };
   }
   

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

• “Biến môi trường” là gì
• Tài liệu về Webpack về: DefinePlugin, EnvironmentPlugin

Sử dụng mô-đun ES

Cách tiếp theo để giảm kích thước giao diện người dùng là sử dụng các mô-đun ES.

Khi bạn sử dụng các mô-đun ES, webpack có thể thực hiện việc loại bỏ mã không dùng đến. Rút gọn cây là khi trình tạo gói duyệt qua toàn bộ cây phần phụ thuộc, kiểm tra những phần phụ thuộc nào được sử dụng và xoá những phần phụ thuộc không dùng đến. Vì vậy, nếu bạn sử dụng cú pháp mô-đun ES, webpack có thể loại bỏ mã không dùng đến:

1. Bạn viết một tệp có nhiều lệnh xuất, nhưng ứng dụng chỉ sử dụng một trong số đó:

   // comments.js
   export const render = () => { return 'Rendered!'; };
   export const commentRestEndpoint = '/rest/comments';
   
   // index.js
   import { render } from './comments.js';
   render();
   

2. Webpack hiểu rằng commentRestEndpoint không được dùng và không tạo ra điểm xuất riêng trong gói:

   // bundle.js (part that corresponds to comments.js)
   (function(module, __webpack_exports__, __webpack_require__) {
   "use strict";
   const render = () => { return 'Rendered!'; };
   /* harmony export (immutable) */ __webpack_exports__["a"] = render;
   
   const commentRestEndpoint = '/rest/comments';
   /* unused harmony export commentRestEndpoint */
   })
   

3. Trình rút gọn sẽ xoá biến không dùng đến:

   // bundle.js (part that corresponds to comments.js)
   (function(n,e){"use strict";var r=function(){return"Rendered!"};e.b=r})
   

Tính năng này hoạt động ngay cả với các thư viện nếu các thư viện đó được viết bằng các mô-đun ES.

Tuy nhiên, bạn không bắt buộc phải sử dụng trình rút gọn tích hợp sẵn của webpack (UglifyJsPlugin) một cách chính xác. Mọi trình rút gọn hỗ trợ việc xoá mã bị tắt (ví dụ: trình bổ trợ Babel Minify hoặc trình bổ trợ Trình biên dịch đóng của Google) sẽ giải quyết vấn đề này.

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

• "Các mô-đun ES6 chuyên sâu"

• Tài liệu trên webpack về việc rung cây

Tối ưu hóa hình ảnh

Hình ảnh chiếm hơn một nửa kích thước trang. Mặc dù không quan trọng như JavaScript (ví dụ: không chặn kết xuất), nhưng các trình xử lý này vẫn chiếm phần lớn băng thông. Hãy sử dụng url-loader, svg-url-loader và image-webpack-loader để tối ưu hoá những trường hợp này trong gói web.

url-loader chèn các tệp tĩnh nhỏ vào ứng dụng. Nếu không có cấu hình, ứng dụng sẽ lấy một tệp đã truyền, đặt bên cạnh gói được biên dịch và trả về một URL của tệp đó. Tuy nhiên, nếu chúng ta chỉ định tuỳ chọn limit, thì tuỳ chọn này sẽ mã hoá các tệp nhỏ hơn giới hạn này dưới dạng một URL dữ liệu Base64 và trả về URL này. Thao tác này sẽ chèn hình ảnh vào mã JavaScript và lưu yêu cầu HTTP:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'url-loader',
        options: {
          // Inline files smaller than 10 kB (10240 bytes)
          limit: 10 * 1024,
        },
      },
    ],
  }
};

// index.js
import imageUrl from './image.png';
// → If image.png is smaller than 10 kB, `imageUrl` will include
// the encoded image: 'data:image/png;base64,iVBORw0KGg…'
// → If image.png is larger than 10 kB, the loader will create a new file,
// and `imageUrl` will include its url: `/2fcd56a1920be.png`

svg-url-loader hoạt động giống như url-loader – ngoại trừ việc mã hoá các tệp bằng phương thức mã hoá URL thay vì phương thức Base64. Phương thức này hữu ích cho hình ảnh SVG – vì tệp SVG chỉ là văn bản thuần tuý nên phương thức mã hoá này sẽ hiệu quả hơn về kích thước.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: "svg-url-loader",
        options: {
          limit: 10 * 1024,
          noquotes: true
        }
      }
    ]
  }
};

image-webpack-loader sẽ nén các hình ảnh đi qua lớp đó. Thư viện này hỗ trợ hình ảnh JPG, PNG, GIF và SVG, vì vậy, chúng ta sẽ sử dụng thư viện này cho tất cả các loại hình ảnh này.

Trình tải này không nhúng hình ảnh vào ứng dụng, vì vậy, trình tải này phải hoạt động cùng với url-loader và svg-url-loader. Để tránh sao chép và dán hình ảnh vào cả hai quy tắc (một cho hình ảnh JPG/PNG/GIF và một cho hình ảnh SVG), chúng ta sẽ thêm trình tải này dưới dạng một quy tắc riêng với enforce: 'pre':

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'image-webpack-loader',
        // This will apply the loader before the other ones
        enforce: 'pre'
      }
    ]
  }
};

Các chế độ cài đặt mặc định của trình tải đã sẵn sàng hoạt động – nhưng nếu bạn muốn định cấu hình thêm, hãy xem các tuỳ chọn trình bổ trợ. Để chọn các tuỳ chọn cần chỉ định, hãy xem hướng dẫn tuyệt vời của Addy Osmani về cách tối ưu hoá hình ảnh.

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

• "Mã hoá base64 được dùng cho mục đích gì?"
• Hướng dẫn của Addy Osmani về cách tối ưu hoá hình ảnh

Tối ưu hoá phần phụ thuộc

Hơn một nửa kích thước JavaScript trung bình đến từ các phần phụ thuộc và một phần kích thước đó có thể không cần thiết.

Ví dụ: Lodash (kể từ phiên bản 4.17.4) thêm 72 KB mã rút gọn vào gói. Nhưng nếu bạn chỉ sử dụng, chẳng hạn như 20 phương thức, thì khoảng 65 KB mã rút gọn sẽ không có tác dụng gì.

Một ví dụ khác là Moment.js. Phiên bản 2.19.1 sử dụng 223 KB mã rút gọn, rất lớn – kích thước trung bình của JavaScript trên một trang là 452 KB vào tháng 10 năm 2017. Tuy nhiên, 170 KB của kích thước đó là tệp bản địa hoá. Nếu bạn không sử dụng Moment.js với nhiều ngôn ngữ, các tệp này sẽ làm phình gói mà không có mục đích.

Bạn có thể dễ dàng tối ưu hoá tất cả các phần phụ thuộc này. Chúng tôi đã thu thập các phương pháp tối ưu hoá trong kho lưu trữ GitHub – hãy xem thử!

Bật tính năng nối mô-đun cho các mô-đun ES (còn gọi là chuyển phạm vi lên trên)

Khi bạn tạo một gói, gói webpack sẽ gói từng mô-đun vào một hàm:

// index.js
import {render} from './comments.js';
render();

// comments.js
export function render(data, target) {
  console.log('Rendered!');
}

↓

// bundle.js (part  of)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  var __WEBPACK_IMPORTED_MODULE_0__comments_js__ = __webpack_require__(1);
  Object(__WEBPACK_IMPORTED_MODULE_0__comments_js__["a" /* render */])();
}),
/* 1 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_exports__["a"] = render;
  function render(data, target) {
    console.log('Rendered!');
  }
})

Trước đây, việc này là bắt buộc để tách biệt các mô-đun CommonJS/AMD với nhau. Tuy nhiên, việc này làm tăng kích thước và mức hao tổn hiệu suất cho mỗi mô-đun.

Webpack 2 đã ra mắt tính năng hỗ trợ cho các mô-đun ES, không giống như các mô-đun CommonJS và AMD, có thể được đi kèm mà không cần gói từng mô-đun bằng một hàm. Và webpack 3 đã có thể thực hiện việc gói như vậy – bằng cách nối mô-đun. Dưới đây là chức năng của việc nối mô-đun:

// index.js
import {render} from './comments.js';
render();

// comments.js
export function render(data, target) {
  console.log('Rendered!');
}

↓

// Unlike the previous snippet, this bundle has only one module
// which includes the code from both files

// bundle.js (part of; compiled with ModuleConcatenationPlugin)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

  // CONCATENATED MODULE: ./comments.js
    function render(data, target) {
    console.log('Rendered!');
  }

  // CONCATENATED MODULE: ./index.js
  render();
})

Bạn có thấy sự khác biệt? Trong gói thuần tuý, mô-đun 0 cần có render từ mô-đun 1. Với việc nối mô-đun, require chỉ được thay thế bằng hàm bắt buộc và mô-đun 1 bị xoá. Gói này có ít mô-đun hơn và ít hao tổn mô-đun hơn!

Để bật hành vi này, trong webpack 4, hãy bật tuỳ chọn optimization.concatenateModules:

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

Trong webpack 3, hãy sử dụng ModuleConcatenationPlugin:

// webpack.config.js (for webpack 3)
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

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

• Tài liệu về gói Webpack dành cho ModuleConcaterationPlugin
• "Giới thiệu ngắn gọn về việc chuyển phạm vi lên trên"
• Mô tả chi tiết về những việc trình bổ trợ này làm

Sử dụng externals nếu bạn có cả mã webpack và mã không phải webpack

Bạn có thể sở hữu một dự án lớn, trong đó một số mã được biên dịch bằng webpack, còn một số mã thì không. Giống như một trang web lưu trữ video, trong đó tiện ích trình phát có thể được tạo bằng webpack và trang xung quanh có thể không được tạo:

Nếu cả hai đoạn mã đều có phần phụ thuộc chung, thì bạn có thể chia sẻ các phần phụ thuộc đó để tránh tải mã của chúng xuống nhiều lần. Bạn có thể thực hiện việc này thông qua tuỳ chọn externals của gói web – tuỳ chọn này thay thế các mô-đun bằng các biến hoặc các mục nhập bên ngoài khác.

Nếu có phần phụ thuộc trong window

Nếu mã không phải webpack của bạn dựa vào các phần phụ thuộc có sẵn dưới dạng biến trong window, thì tên phần phụ thuộc đại diện cho tên biến:

// webpack.config.js
module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

Với cấu hình này, gói web sẽ không nhóm các gói react và react-dom. Thay vào đó, các giá trị này sẽ được thay thế bằng nội dung như sau:

// bundle.js (part of)
(function(module, exports) {
  // A module that exports `window.React`. Without `externals`,
  // this module would include the whole React bundle
  module.exports = React;
}),
(function(module, exports) {
  // A module that exports `window.ReactDOM`. Without `externals`,
  // this module would include the whole ReactDOM bundle
  module.exports = ReactDOM;
})

Nếu các phần phụ thuộc được tải dưới dạng gói AMD

Nếu mã không phải webpack của bạn không hiển thị các phần phụ thuộc vào window, thì mọi thứ sẽ phức tạp hơn. Tuy nhiên, bạn vẫn có thể tránh tải cùng một mã hai lần nếu mã không phải webpack sử dụng các phần phụ thuộc này dưới dạng gói AMD.

Để thực hiện việc này, hãy biên dịch mã webpack dưới dạng gói AMD và các mô-đun đại diện cho URL thư viện:

// webpack.config.js
module.exports = {
  output: {
    libraryTarget: 'amd'
  },
  externals: {
    'react': {
      amd: '/libraries/react.min.js'
    },
    'react-dom': {
      amd: '/libraries/react-dom.min.js'
    }
  }
};

Webpack sẽ gói gói này vào define() và làm cho gói này phụ thuộc vào các URL sau:

// bundle.js (beginning)
define(["/libraries/react.min.js", "/libraries/react-dom.min.js"], function () { … });

Nếu mã không phải webpack sử dụng cùng các URL để tải các phần phụ thuộc của nó, thì các tệp này sẽ chỉ được tải một lần – các yêu cầu bổ sung sẽ sử dụng bộ nhớ đệm của trình tải.

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

• Tài liệu Webpack trên externals

Tổng hợp

• Bật chế độ phát hành chính thức nếu bạn sử dụng webpack 4
• Giảm thiểu mã của bạn bằng các tuỳ chọn trình thu gọn và trình tải ở cấp gói
• Xoá mã chỉ dành cho nhà phát triển bằng cách thay thế NODE_ENV bằng production
• Sử dụng các mô-đun ES để bật tính năng rung cây
• Nén hình ảnh
• Áp dụng biện pháp tối ưu hoá dành riêng cho phần phụ thuộc
• Bật tính năng nối mô-đun
• Hãy sử dụng externals nếu lựa chọn này phù hợp với bạn