【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载

谁借莪１个温暖的怀抱￠ 2022-09-09 13:51 63阅读 0赞

**webpack系列文章：**

*  [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -]
 *  [【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验][Webpack _8_ - PWA]
 *  [【Webpack 性能优化系列(7) - 懒加载和预加载】][Webpack _7_ -]
 *  [【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！][Webpack _5_ - tree shaking]
 *  [【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存][Webpack _4_ - _ _bable]
 *  [【Webpack 性能优化系列(3) - oneOf】][Webpack _3_ - oneOf]
 *  [【Webpack 性能优化系列(2) - source-map】][Webpack _2_ - source-map]
 *  [【Webpack 性能优化系列(1) - HMR 热模块替换】][Webpack _1_ - HMR]
 *  [【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！][Webpack _css_css_html_js_js_eslint_js_babel]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]
 *  [【Webpack 简介及五个核心概念】][Webpack]

# code splitting #

**`code splitting(代码分割)`是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。**

**作用：代码分割可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。**

常用的代码分割方法有三种：

*  **入口起点：使用 `entry` 配置多入口手动地分离代码。**
 *  **防止重复：使用 SplitChunksPlugin 去重和分离 chunk。**
 *  **动态导入：通过模块的内联函数调用来分离代码。**

# 多入口手动分离代码 #

这是迄今为止最简单直观的分离代码的方式，如何从 main bundle 中分离 another module(另一个模块)，即配置多入口：

**project**

**another-module.js**

import _ from 'lodash';
    
    console.log(_.join(['Another', 'module', 'loaded!'], ' '));

**webpack.config.js**

const path = require('path');
    
     module.exports = { 
    +  mode: 'development',
    +  entry: { 
    +    index: './src/index.js',
    +    another: './src/another-module.js',
    +  },
       output: { 
    +    filename: '[name].[contenthash:10].bundle.js',
         path: path.resolve(__dirname, 'dist'),
       },
     };

这将生成如下构建结果：

...
    [webpack-cli] Compilation finished
    asset index.bundle.js 553 KiB [emitted] (name: index)
    asset another.bundle.js 553 KiB [emitted] (name: another)
    runtime modules 2.49 KiB 12 modules
    cacheable modules 530 KiB
      ./src/index.js 257 bytes [built] [code generated]
      ./src/another-module.js 84 bytes [built] [code generated]
      ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
    webpack 5.4.0 compiled successfully in 245 ms

**这种方式存在一些隐患：**

*  **如果入口 chunk 之间包含一些重复的模块，那些重复模块都会被引入到各个 bundle 中。**
 *  **这种方法不够灵活，并且不能动态地将核心应用程序逻辑中的代码拆分出来。**

**上述隐患将造成重复引用。**

解决方法：

**配置 `dependOn` option 选项，这样可以在多个 chunk 之间共享模块：**

**webpack.config.js**

const path = require('path');
    
     module.exports = { 
       mode: 'development',
       entry: { 
    +    index: { 
    +      import: './src/index.js',
    +      dependOn: 'shared',
    +    },
    +    another: { 
    +      import: './src/another-module.js',
    +      dependOn: 'shared',
    +    },
    +    shared: 'lodash',
       },
       output: { 
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'dist'),
       },
     };

如果我们要在一个 HTML 页面上使用多个入口时，还需设置 `optimization.runtimeChunk: 'single'`，否则还会遇到这里所述的麻烦。

**webpack.config.js**

const path = require('path');
    
     module.exports = { 
       mode: 'development',
       entry: { 
         index: { 
           import: './src/index.js',
           dependOn: 'shared',
         },
         another: { 
           import: './src/another-module.js',
           dependOn: 'shared',
         },
         shared: 'lodash',
       },
       output: { 
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'dist'),
       },
    +  optimization: { 
    +    runtimeChunk: 'single',
    +  },
     };

**构建结果如下：**

...
    [webpack-cli] Compilation finished
    asset shared.bundle.js 549 KiB [compared for emit] (name: shared)
    asset runtime.bundle.js 7.79 KiB [compared for emit] (name: runtime)
    asset index.bundle.js 1.77 KiB [compared for emit] (name: index)
    asset another.bundle.js 1.65 KiB [compared for emit] (name: another)
    Entrypoint index 1.77 KiB = index.bundle.js
    Entrypoint another 1.65 KiB = another.bundle.js
    Entrypoint shared 557 KiB = runtime.bundle.js 7.79 KiB shared.bundle.js 549 KiB
    runtime modules 3.76 KiB 7 modules
    cacheable modules 530 KiB
      ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
      ./src/another-module.js 84 bytes [built] [code generated]
      ./src/index.js 257 bytes [built] [code generated]
    webpack 5.4.0 compiled successfully in 249 ms

由上可知，除了生成 shared.bundle.js，index.bundle.js 和 another.bundle.js 之外，还生成了一个 runtime.bundle.js 文件。

# SplitChunksPlugin #

`SplitChunksPlugin` 插件可以将公共的依赖模块`node_modules`提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。让我们使用这个插件，将之前的示例中重复的 lodash 模块去除：

**webpack.config.js**

const path = require('path');
    
      module.exports = { 
        mode: 'development',
        entry: { 
          index: './src/index.js',
          another: './src/another-module.js',
        },
        output: { 
          filename: '[name].bundle.js',
          path: path.resolve(__dirname, 'dist'),
        },
    +   optimization: { 
    +     splitChunks: { 
    +       chunks: 'all',
    +     },
    +   },
      };

**使用 optimization.splitChunks 配置选项之后，现在应该可以看出，index.bundle.js 和 another.bundle.js 中已经移除了重复的依赖模块。需要注意的是，插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小。**

**总结：**

**1.可以将node\_modules中代码单独打包一个chunk最终输出  
2.自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk**

**构建结果如下：**

...
    [webpack-cli] Compilation finished
    asset vendors-node_modules_lodash_lodash_js.bundle.js 549 KiB [compared for emit] (id hint: vendors)
    asset index.bundle.js 8.92 KiB [compared for emit] (name: index)
    asset another.bundle.js 8.8 KiB [compared for emit] (name: another)
    Entrypoint index 558 KiB = vendors-node_modules_lodash_lodash_js.bundle.js 549 KiB index.bundle.js 8.92 KiB
    Entrypoint another 558 KiB = vendors-node_modules_lodash_lodash_js.bundle.js 549 KiB another.bundle.js 8.8 KiB
    runtime modules 7.64 KiB 14 modules
    cacheable modules 530 KiB
      ./src/index.js 257 bytes [built] [code generated]
      ./src/another-module.js 84 bytes [built] [code generated]
      ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
    webpack 5.4.0 compiled successfully in 241 ms

# 动态导入 #

**当涉及到动态代码拆分时，可以使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入。**

先从上述示例的配置中移除掉多余的 `entry` 和 `optimization.splitChunks`，因为接下来的演示中并不需要它们：

**webpack.config.js**

const path = require('path');
    
     module.exports = { 
       mode: 'development',
       entry: { 
         index: './src/index.js',
    -    another: './src/another-module.js',
       },
       output: { 
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'dist'),
       },
    -  optimization: { 
    -    splitChunks: { 
    -      chunks: 'all',
    -    },
    -  },
     };

**project**  
![在这里插入图片描述][39f62c55999a4a26a39b399822d48494.png]  
**index.js**

**构建结果如下：**  
![在这里插入图片描述][e5a42304e86b4173ab8d8eb53e7b3372.png]

# 参考 #

*  https://webpack.docschina.org/guides/code-splitting/\#dynamic-imports
 *  https://www.bilibili.com/video/BV1e7411j7T5?p=7&spm\_id\_from=pageDriver

[Webpack _9_ -]: https://blog.csdn.net/weixin_45844049/article/details/120065367
[Webpack _8_ - PWA]: https://blog.csdn.net/weixin_45844049/article/details/120063411
[Webpack _7_ -]: https://blog.csdn.net/weixin_45844049/article/details/120048999
[Webpack _5_ - tree shaking]: https://blog.csdn.net/weixin_45844049/article/details/120043245
[Webpack _4_ - _ _bable]: https://blog.csdn.net/weixin_45844049/article/details/120022585
[Webpack _3_ - oneOf]: https://blog.csdn.net/weixin_45844049/article/details/120008581
[Webpack _2_ - source-map]: https://blog.csdn.net/weixin_45844049/article/details/120002385
[Webpack _1_ - HMR]: https://blog.csdn.net/weixin_45844049/article/details/119982759
[Webpack _css_css_html_js_js_eslint_js_babel]: https://blog.csdn.net/weixin_45844049/article/details/119828504
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[Webpack]: https://blog.csdn.net/weixin_45844049/article/details/119452096
[39f62c55999a4a26a39b399822d48494.png]: /images/20220829/2daeb44a583a42c49d3c6954f6c4f7f2.png
[e5a42304e86b4173ab8d8eb53e7b3372.png]: /images/20220829/b3b4ea93ed8c4efd8035dc82068c734b.png