代码分割
- 对于大型web应用来说,将所有的代码都放在一个文件中是不够有效的。特别是某些代码块是在某些特殊时候才会被用到
- webpack有个功能就是将代码库分割成chunks代码块,当代码运行到需要他们的时候再加载
入口点分割
entry中配置 多页应用(MPA)
- 问题:
- 如果入口chunks之间包含重复代码块,那重复代码块都会被引入到各个bundle中
- 不够灵活,并且不能将核心应用程序逻辑,进行动态拆分
1 | entry:{ |
懒加载
当用户当前需要什么功能就只加载这个功能对应的代码(按需加载)
vue,angular,react 的懒加载组件都是动态import
一般采用以下原则
- 对于功能进行划分,每一类一个chunk
- 首次打开页面需要的功能直接加载,尽快展示给用户,某些依赖大量代码的功能点可以按需加载
- 被分割出去的代码需要一个按需加载的时机
1 | ()=> import('./xxx.js') |
预加载 (preload)
- 使用预加载,表示该模块肯定会被用到,需要提前进行获取
1 | document.querySelector('#btn').addEventListener('click',()=>{ |
预获取 (prefetch)
- 使用预获取,表示该模块可能后面会用到,浏览器会在空闲时间下载该模块
1 | document.querySelector('#btn').addEventListener('click',()=>{ |
扩展:
- preload 预加载 资源肯定会用到,优先级较高,需要提前获取,会影响或者阻塞页面中关键资源加载,可能会有性能问题
- prefetch 预获取 资源有可能用到, 是在浏览器空闲时间加载,没有性能问题
提取公共代码 splitChunks
- module js的webpack模块化规范,es6,commonjs等
- chunk 分为三种
- 项目入口
- import()动态引入
- splitchunks 拆分出的代码
- bundle 是对chunk打包压缩后的产物
1 | module.exports = { |