如何将Webpack按需加载的chunk命名为长尾关键词？

本文共计1389个文字，预计阅读时间需要6分钟。

前言，近期遇到复杂H5页面开发，为了优化H5首屏加载速度，想使用按需加载的方式，减少首次加载的JavaScript文件体积。以下是处理过程的记录，涉及到的主要包括以下三点：

1. 按需加载技术

2.首次加载JavaScript文件体积优化

3.加载过程记录与优化

前言

最近，遇到复杂h5页面开发，为了优化H5首屏加载速度，想到使用按需加载的方式，减少首次加载的JavaScript文件体积，于是将处理过程在这里记录一下，涉及到的主要是以下三点：

• 使用Webpack如何做按需加载
• filename和chunkFilename的区别
• 如何命名chunk的名称(webpackChunkName)

1 使用Webpack如何做按需加载

大家都知道Webpack是现在流行的前端打包编译工具，通过模块之间的依赖关系，将代码打包组织到一起。Webpack目前已经到v4.x，不同版本版支持按需加载的方式不同，主要有两种：

• webpack1.x 中提供了 require.ensure()
• webpack2.x 中提供了 import()

require.ensure()

// 举例 require.ensure([], function(require){ require('b'); });

webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将[模块b] 添加到一个分开的 chunk 当中。