lazy loading

lazy loading：懒加载，并非图片的懒加载，而是js文件的懒加载
前提：需要进行代码分割（code split），分割成单独的js文件，然后在需要的时候进行再加载

• 项目目录：

// src/js/test.js
console.log('test.js文件被加载了~');
export function mul(x, y) {
  return x * y;
}
export function count(x, y) {
  return x - y;
}

// src/js/index.js
console.log('index.js文件被加载了~');
// import { mul } from './test';
document.getElementById('btn').onclick = function() {
  // 懒加载~：当文件需要使用时才加载~
  // 预加载 prefetch：会在使用之前，提前加载js文件 
  // 正常加载可以认为是并行加载（同一时间加载多个文件）  
  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};

相比第4行，第11行代码的好处是：

• test.js并不会一开始就被加载进来，只有点击按钮之后才会被加载进来
• 第二次点击按钮，不会被重复加载

webpackPrefetch: true 预加载

• 懒加载~：当文件需要使用时才加载~
• 预加载 prefetch：会在使用之前，提前加载js文件

懒加载的弊端：在需要时再加载,会有延迟问题
预加载的弊端：兼容性比较差，移动端慎用，PC端等高端浏览器可以考虑使用