webpack基础下

开发环境和生产环境的配置

1、分别创建开发和生产2个配置webpack.xx.js文件，共同的配置部分放公共js，
为了方便都存放在某目录下。
2、使用webpack-merge模块，分别将2个js文件与公共JS合并
3、修改package.json

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },

设置不同的打包命令来执行不同的环境配置文件，从而实现 开发环境和生产环境的打包

Code Splitting 代码分割

webpack打包，就生成一个js，使用Code Splitting分为多个js，由于可以并行http请求，所以比加载一个大的js速度变快；更新页面也不需要更新所有JS。大大加快页面加载速度。很多插件会智能分割代码，没使用到的代码就不会打包与分割。

Lazy Loading 懒加载

懒加载：如触发一些事件才会请求载入js，图片等；优化了页面一开始的加载速度。
不是该页面使用到的，也不会去加载。
懒加载是es的用法，不属于webpack。

打包分析

方法一：打包分析工具analyse

打包时需要生成描述文件
"scripts": {
"dev": "webpack --profile --json > stats.json"
},
用analyse，分析打包的描述文件，可以得出打包信息和关系
git上搜索analyse就能找到

方法二：Preloading 预载入

chrome工具coverage，分析代码利用率，提升优化。
推荐异步引入方式（懒加载），加快页面载入时间
赖加载的缺点，触发的事件js代码需要触发后才请求载入，必定会加长交互等待

方法三：Prefetching 预提取

Prefetching解决预载入的缺点，当页面载入完成后，请求空闲后，才去载入之前的Preloading
chrome工具coverage，查看优化分析