webpack简单代码分割

webpack简单代码分割

1.设置多入口文件手动拆分代码,文件目录如下

webpack简单代码分割_第1张图片

src/join.js 写入内容:

webpack简单代码分割_第2张图片

webpack.config.js 配置

webpack简单代码分割_第3张图片

build之后,可见编译后的文件代码是重复的

webpack简单代码分割_第4张图片

2.在之前1.的基础上实现无重复拆分。引入CommonsChunkPlugin来删除重复的lodash,添加配置

webpack简单代码分割_第5张图片

生成文件:webpack简单代码分割_第6张图片

3、动态导入

清理不必要的文件和配置:

webpack简单代码分割_第7张图片

重新添加配置及重写index.js

webpack简单代码分割_第8张图片

webpack简单代码分割_第9张图片

结果lodash.bundle.js存放的是lodash.js内容

webpack简单代码分割_第10张图片

通过动态import无重复实现了动态代码切割


你可能感兴趣的:(webpack)