webpack简单代码分割

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

webpack简单代码分割

src/join.js 写入内容:

webpack简单代码分割

webpack.config.js 配置

webpack简单代码分割

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

webpack简单代码分割

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

webpack简单代码分割

生成文件:webpack简单代码分割

3、动态导入

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

webpack简单代码分割

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

webpack简单代码分割

webpack简单代码分割

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

webpack简单代码分割

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


相关文章: