webpack学习之—— Code Spliting(代码分离)

Posted baoyadong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack学习之—— Code Spliting(代码分离)相关的知识,希望对你有一定的参考价值。

      代码分离特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。

   有三种常用的代码分离方法:

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

    1. 入口起点(entry points)

     这是迄今为止最简单、最直观的分离代码的方式。不过,这种方式手动配置较多,并有一些陷阱,我们将会解决这些问题。先来看看如何从 main bundle 中分离另一个模块:  

      

    正如前面提到的,这种方法存在一些问题:

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

   2. 防止重复(prevent duplication)

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

       

 3. 动态导入(dynamic imports)

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

       

     在我们开始本节之前,先从配置中移除掉多余的 entry 和 CommonsChunkPlugin,因为接下来的演示中并不需要它们:

      src/index.js:

      

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

以上是关于webpack学习之—— Code Spliting(代码分离)的主要内容,如果未能解决你的问题,请参考以下文章

webpack学习之——创建devServer开发环境

webpack学习之——模块(Modules)

webpack 3.X学习之多页面打包

webpack学习之—— Loaders

node.js学习之webpack打包react最简单用法

webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)