什么是代码使用率？
比如一个JS文件有100行代码，加载他的时候里面当前可能只有60行是直接能加载用到的，里面的另外40行比如说是click事件触发后的代码逻辑，显然，如果我们不点击，只是纯属浏览，那么这40行代码就白白加载了，因为用不到啊，所以总体来说这个文件的代码使用率就是60%。
但是呢？如果能把click这个异步操作的代码给抽离出去，等到真的触发click的时候再进行加载，那么原来的60行代码都是用于展示的，就全都有用，那么抽离掉click的那部分异步代码后，剩下的60行代码的使用率就是100%，所以首次进来如果使用率越高，就说明物尽其用就会很好啊。记载那么多不用的岂不是浪费么？
下面就去介绍一下如果提高代码使用率的两种方式：
一、抽离异步模块，点击时候去加载
二、在一的基础上，再去进行网络闲时加载，提高用户体验。
1）首先在入口文件index.js中写入：点击页面就会出现一段文字的demo
2）运行本地打包，然后双击打包后生成的index.html文件，点击空白出现文字,并且选在console中 ctrl + shift +p 在弹出输入框中输入 cover
选中第一个Show Coverage,点开后点击录制（变成红色的圆），可以看到当前文件代码使用率，百分比越高，就说明使用率越高，是越好的。
现在我们用异步请求的方式：
1）新建一个click.js，把原来的点击逻辑抽离到click.js文件
2）在入口文件中动态引入（在点击的时候才去import）
3）安装插件：npm install --save-dev @babel/plugin-syntax-dynamic-import
4）在.babelrc文件中的plugins里配置：
5）运行npm run bundle打包：0.js就是异步引用的模块
6）双击运行打包好的index.html，还是上面那个步骤，发现刚进来页面时候是：
比之前的67.8% 提高了，说明代码利用率上去了。
此时再点击页面：发现click加载进来了，并且上面的利用率变低了
总结：运用动态加载，异步加载，可以在页面初始化提高代码利用率。
那么我们能不能在网络空闲的状态下，自动的把异步的模块加载进来呢？也是不是更好的优化方式？
方法：只需要更改入口文件index.js引用click.js时候加一个注释
先看原来的：
运行打包看index.html浏览器的nextwork: 只加载了打包后的这两个文件，只有点击的时候我们在cover里面才能看到click.js加载进来了
再看现在加了预加载注释的：
然后执行打包打开index.html看nextwork第一次加载：发现多了个0.js,这个0.js就是那个click.js的异步模块
综上：使用预加载注释引入异步模块的话，比着上面用click点击再加载用户体验要好，比如这个异步模块体积有点大，那么在用户点击后，加载还需要一点时间，此时可能会出现白屏，但是预加载会在网络空闲的时候，注意是闲时，把异步模块先给你准备好，缓存到浏览器中，然后你在触发点击事件的时候，从容不迫的拿给你，这就很流畅了。叫做未雨绸缪吧。
还有一个是 /* webpackPreload: true */
Prefetch 是网络空闲加载，
Preload 是跟着主进程一起加载，其他请求一起加载
所以，还是Prefetch 更好！