Skip to content

Latest commit

 

History

History
36 lines (22 loc) · 1.63 KB

code-splitting.md

File metadata and controls

36 lines (22 loc) · 1.63 KB

代码分离

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间

目前脚手架的代码分离主要采用了以下方式:

防止重复

SplitChunksPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中,或者提取到一个新生成的 chunk

目前脚手架的防止重复拆分方式主要应用于:

  • node_modules 第三方库

具体的实现方式,可以参考 webpack.config.babel.ts 文件中的 optimization.splitChunks 配置

动态导入

当涉及到动态代码拆分时,脚手架采用的是 webpack 推荐选择的方式:使用符合 ECMAScript 提案import() 语法来实现动态导入

目前脚手架的动态导入拆分方式主要应用于:

  • 页面
  • 国际化语言文件

具体的实现方式,可以参考 懒加载


<< 自动化测试      懒加载 >>