preload和prefetch的应⽤场景？

1.webpack优化之preload和prefetch：

单⻚⾯应⽤由于⻚⾯过多，可能会导致代码体积过⼤，从⽽使得⾸⻚打开速度过慢。所以切分代码，优化⾸屏打开速度尤为重要。

但是所有的技术⼿段都不是完美的。当我们切割代码后，⾸屏的js⽂件体积减少了好多。但是也有⼀个突出的问题：

那就是当跳转其他⻚⾯的时候，需要下载相应⻚⾯的js⽂件，这就导致体验极其不好，每⼀次点击访问

新⻚⾯都要等待js⽂件下载，然后再去请求接⼝获取数据。频繁出现loading动画的体验真的不好

所以如果我们在进⼊⾸⻚后，在浏览器的空闲时间提前下好⽤户可能会点击⻚⾯的js⽂件，这样⾸屏的js

⽂件⼤⼩得到了控制，⽽且再点击新⻚⾯的时候，相关的js⽂件已经下载好了，就不再会出现loading动画

2.动态引⼊js⽂件，实现code-splitting，减少⾸屏打开时间

按引⼊情况加载，只需添加注释即可

  • 代码分割注释：/webpackChunkName: ‘mp-supports’/
  • prefetch注释：/* webpackPrefetch: true */

更多的，可以查看 webpack 注释⿊魔法：https://webpack.js.org/api/module-methods/#magic-comments

以下便是使用案列:

1
2
3
4
5
6
7
8
9
10
11
12
const { default: lodash } = await import(/* webpackChunkName: "lodash" */ /*
webpackPrefetch: true */ 'lodash');
// Multiple possible targets
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
/* webpackPreload: true */
`./locale/${language}`
);