MPA首屏加载速率优化实战

背景

​ 学校实验室的项目，因为学校只开放给我们一个端口，所以只能把后台管理和学生端合并成多页应用，我是做后台管理的，老师要求某个功能要加上代码高亮，在全局引入highlight.js后发现首屏加载速率不行了，记录一下发现更多问题并优化的过程。

让代码在网页不刷新的前提下得到最新的改动，这就是Hot Module Replacement，HMR

由Rollup提出，为了消除无用的JavaScript代码而被引入的，对于es模块依赖关系确定的，就可以进行静态分析，CJS不可以

关于loader的作用和配置方法，在 初识webpack 这篇文章中已经讲过，本篇文章会讲常用的一些loader，并自己实现一个loader函数。

打包后的文件后缀，通常用于做版本管理，文件被修改后打包出来的文件指纹不同，浏览器只会下载这些不同的文件，没被修改的文件从缓存读取，加快浏览速度

1. 安装

1

npm install webpack webpack-cli --save-dev

webpack是核心模块，webpack-cli则是命令行工具

然后在根目录下创建webpack.config.js来配置webpack