理解Chunks

Chunks类型

  • entry chunks:webpack运行时候和模块加载的入口文件
  • normal chunks:除了entry chunks外，使用过程中动态加载的内容，例如jsonp
  • initial chunks:通过CommonsChunkPlugin生成的相关文件

entry chunks之前已经涉及不再深究，下面介绍的是normal chunks（懒加载）的主要应用。

webpack的强大之处在于，能够拆分应用代码成更小的文件，实现动态加载。

通过lunr实例介绍懒加载

lunr是一个前端实现全文检索的插件，以下为实现代码

参考react-lunr应用代码

webpack检测require.ensure，然后拆分被依赖的文件，这种方式同样适用于路由，在用户点击相应路由后，开始加载相应的内容。通过require.ensure也可以是先滚动加载等。

webpack的动态加载

除了require.ensure还有一个配置项需要知道require.context,它允许require进在编译时候不确定的内容。这种技术应用在生成静态，测试时候。

例如静态网站构建：（markdown内容在pages下）

  1. // 通过加载器处理页面，此时markdown还没有，此时加载会在有md文件时候处理
  2. const req = require.context(
  3.   'json!yaml-frontmatter!./pages',
  4.   true, // Load files recursively. Pass false to skip recursion.
  5.   /^\.\/.*\.md$/ // Match files ending with .md.
  6. );

实际应用项目Antwar，静态网站生成器

<<上一节:字体Loader >>下一节:webpack语法分析