webpack优化 代码分割 code spliiting

Code Splitting

代码分割

 

有三种方式

1.通过设置EntryPoints：在entry选项中手动设置入口

2.通过使用SplitChunksPlugin来分割

3.动态引入语法

 

 

1.Entry Points：

直接设置多个口，

 

假设src目录下有index.js和another-module.js

 

我们在webpack的配置文件中设置两个entry，最终会打包生成两个文件

 

 

 

 

直接设置entry来分隔代码有一些缺陷，首先如果两个entry中都引用了相同的module，那么最终生成的两个文件中都会包含相同的内容。而且不能根据代码中实际的代码逻辑来动态的分割代码。

 

 

 

去重：

方法1.使用depend on选项

（！这个方法一般不怎么用，用下面的splitchunk方法.）

 ( 因为需要手动指明)

通过使用dependOn选项来指明这两个入口依赖的相同文件放到另一个入口中

 

 

 depend on选项

（这里在两个入口中添加了depenOn选项，值为shared，又增加了一个入口为shared，内容是lodash）

 

方法2.使用splitchunkplugin

 

 

 增加optimization选项，设置splitchunks

 

 我们会发现打出了vendor

 

 

3.动态引入语法：

使用动态引入语法，require.ensuse（legacy）、import()

 

 

 首先增加chunkFilename选项，（determines the name of non-entry chunk files. ）

 

 

 然后使用动态引入语法,  import(…….).then()

 

 

 查看打包，生成了vendor

 

由于import返回一个promise，所以他还可以配合async关键字使用