简单的通过 require.ensure代码分割

  • a 和 b 通过CommonJS引入
  • c 通过webpack的 require.ensure 引入.
    • webpack将c打包打包并且按需加载
  • b 和 d 在 require.ensure 的回调函数通过CommonJS引入
    • webpack 检测到b和d实在回调函数里，也会被按需加载
    • b已经在上边引入过一次，webpack会优化，只留一个b模块

      example.js

      1. var a = require("a");
      2. var b = require("b");
      3. require.ensure(["c"], function(require) {
      4. require("b").xyz();
      5. var d = require("d");
      6. });

      webpack.config.js

      ```javascript module.exports = { optimization: { chunkIds: “deterministic” // To keep filename consistent between different modes (for example building only) } };
  1. <a name="QFQzn"></a>
  2. # dist/796.js
  3. ```javascript
  4. (self["webpackChunk"] = self["webpackChunk"] || []).push([[796],{
  6. /***/ "./node_modules/c.js":
  7. /*!***************************!*\
  8.   !*** ./node_modules/c.js ***!
  9.   \***************************/
  10. /*! unknown exports (runtime-defined) */
  11. /*! runtime requirements:  */
  12. /***/ (() => {
  14. // module c
  16. /***/ }),
  18. /***/ "./node_modules/d.js":
  19. /*!***************************!*\
  20.   !*** ./node_modules/d.js ***!
  21.   \***************************/
  22. /*! unknown exports (runtime-defined) */
  23. /*! runtime requirements:  */
  24. /***/ (() => {
  26. // module d
  28. /***/ })
  30. }]);

dist/main.js

  1. /...省略 ... /
  2. var a = __webpack_require__(/*! a */ "./node_modules/a.js");
  3. var b = __webpack_require__(/*! b */ "./node_modules/b.js");
  4. __webpack_require__.e(/*! require.ensure */ 796).then((function(require) {
  5.     __webpack_require__(/*! b */ "./node_modules/b.js").xyz();
  6.     var d = __webpack_require__(/*! d */ "./node_modules/d.js");
  7. }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
  8. /...省略 ... /