17、webpack代码分离--动态导入

忘是亡心i 2022-01-15 11:27 384阅读 0赞

**动态导入（dynamic imports）**

当涉及到动态代码拆分时，webpack 提供了两个类似的技术。对于动态导入，第一种，也是优先选择的方式是，使用符合 [ECMAScript 提案][ECMAScript] 的 [import() 语法][import_]。第二种，则是使用 webpack 特定的 [require.ensure][]。

import() 调用会在内部用到 promises。如果在旧有版本浏览器中使用 import()，记得使用 一个 
    polyfill 库（例如 es6-promise 或 promise-polyfill），来 shim Promise。

1、修改webpack.config.js

2、这里使用了 chunkFilename，它决定非入口 chunk 的名称。想了解 chunkFilename 更多信息，请查看 [output 相关文档][output]。接着，更新我们的项目，移除掉那些现在不会用到的文件:

现在，我们不再使用静态导入 lodash，而是通过使用动态导入来分离一个 chunk：

3、修改src/index.js

※ 在注释中使用了 webpackChunkName。这样做会导致我们的 bundle 被命名为 lodash.bundle.js ，而不是 \[id\].bundle.js

4、编译运行

> npm run build
    
    > code-split@1.0.0 build D:\dev\work\webpackwork\code-dynamic
    > webpack --config webpack.config.js --display-modules
    
    Hash: 269509f5f1932b7dbb46
    Version: webpack 4.33.0
    Time: 955ms
    Built at: 2019-06-12 20:05:08
                       Asset       Size  Chunks             Chunk Names
             index.bundle.js   2.21 KiB       0  [emitted]  index
                  index.html  189 bytes          [emitted]
    vendors~lodash.bundle.js   69.4 KiB       1  [emitted]  vendors~lodash
    Entrypoint index = index.bundle.js
    [0] ./src/index.js 409 bytes {0} [built]
    [1] ./node_modules/lodash/lodash.js 527 KiB {1} [built]
    [2] (webpack)/buildin/global.js 472 bytes {1} [built]
    [3] (webpack)/buildin/module.js 497 bytes {1} [built]

lodash.js被打包到了vendors~ladash.bundle.js文件中

[ECMAScript]: https://github.com/tc39/proposal-dynamic-import
[import_]: https://www.webpackjs.com/api/module-methods#import-
[require.ensure]: https://www.webpackjs.com/api/module-methods#require-ensure
[output]: https://www.webpackjs.com/configuration/output/#output-chunkfilename