webpack实现代码分离

场景：

当我们在不同的入口文件中引入相同的代码，会被分别打包，增加代码体积，那么如何提取公共的代码呢？

案例：

当我们在项目的index.js和another-module.js中下载并引入了lodash。

下载： npm  install  lodash --save-dev

image.png

并将其在webpck.config.js中进行如下配置：

image.png

执行npx webpack ，在终端中可以看见，这两个文件都变大了

image.png

解决方案：

第一种在entry中进行如下配置：

image.png

执行 npx webpack，此时会把他们共同的lodash文件打包到commonModule的文件中，index文件和anther文件会恢复原来的大小

image.png
第二种：使用webpack内置的一个插件：split-chunks-Plugin ，先将entry中配置恢复，在optimization中进行如下配置：
image.png

执行 npx webpack，此时webpack会自动将公共的文件打包出来，如下：

image.png
第三种：使用import("lodash")的方式进行动态加载，使用这个方式在打包后的文件中生成一个单独的lodash文件，同时使用插件打包的lodash文件会合并同一个lodash。
image.png
同时可以使用动态导入的方式生成一个懒加载，例如我们实现一个点击求和案例，先在src下创建一个math.js文件，内容如下
image.png
在index.js中使用使用import语法导入当前模块，此时执行webpack，只有在点击按钮的时候才会加载math页面。
image.png
同时我们也可以在魔法注释中使用预获取和预加载两种方式，prefetch(预获取)：在浏览器其他页面加载完成后的空闲时间去加载当前页面，第一次会加载，preload（预加载）：在需要的时候去加载，第一次不会加载，预加载的使用方式和预获取的方式相同，如上图。