场景：
当我们在不同的入口文件中引入相同的代码，会被分别打包，增加代码体积，那么如何提取公共的代码呢？
案例：
当我们在项目的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（预加载）：在需要的时候去加载，第一次不会加载，预加载的使用方式和预获取的方式相同，如上图。
网友评论