Webpack进阶（Lazy Loading ，打包分析，Preloading，Prefetching）

Lazy Loading 懒加载，Chunk是什么？

用户当前需要用什么功能就只加载这个功能对应的代码，也就是所谓的按需加（异步加载）载 在给单页应用做按需加载优化时，一般采用以下原则：

• 对网站功能进行划分，每一类一个chunk
• 对于首次打开页面需要的功能直接加载，尽快展示给用户
• 某些依赖大量代码的功能点可以按需加载
• 被分割出去的代码需要一个按需加载的时机

每一个文件就是一个 chunk

详细请看官方文档：lazy-loading

---

打包分析，Preloading，Prefetching

打开网址：webpack分析工具：https://github.com/webpack/analyse

在 package.json 中

{  
  "scripts": {
    "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",     
    // 把打包过程的描述放在stats.json文件中
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },
}

在控制台运行 npm run dev-build ,在根目录下生成 stats.json 文件。打开网址 http://webpack.github.com/analyse ,把stats.json文件传上去，会出现分析结果（这个网站不稳定，可能要翻墙）。

详细请看官方文档：bundle-analysis 打包分析工具

介绍 webpack-bundle-analyzer 的使用：

通过使用https://github.com/webpack-contrib/webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化。

1、先安装
npm install --save-dev webpack-bundle-analyzer
2、在webpack.config.js中配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // })
]

3、在package.json的scripts里加入下面这句话，就可以npm run build之后看到webpack-bundle-analyzer的效果：

"dev": "webpack --config webpack.dev.js --progress"

官网图镇楼：

stats.json文件参数说明：

• profile：记录下构建过程中的耗时信息；
• json：以 JSON 的格式输出构建结果，最后只输出一个 .json 文件，这个文件中包括所有构建相关的信息。
• Webpack 官方提供了一个可视化分析工具 Webpack Analyse
• Modules：展示所有的模块，每个模块对应一个文件。并且还包含所有模块之间的依赖关系图、模块路径、模块ID、模块所属 Chunk、模块大小；
• Chunks：展示所有的代码块，一个代码块中包含多个模块。并且还包含代码块的ID、名称、大小、每个代码块包含的模块数量，以及代码块之间的依赖关系图；
• Assets：展示所有输出的文件资源，包括 .js、.css、图片等。并且还包括文件名称、大小、该文件来自哪个代码块；
• Warnings：展示构建过程中出现的所有警告信息；
• Errors：展示构建过程中出现的所有错误信息；
• Hints：展示处理每个模块的过程中的耗时。

打开谷歌控制台查看代码使用率，按 ctrl+shift+p ，输入 coverage 查看。

预取/预加载模块(prefetch/preload module)

假如有一个HomePage组件，其内部有一个LoginButton.js登陆组件，再点击后按需加载 LoginModel 组件。

LoginButton.js:

import(/* webpackPrefetch: true */ 'LoginModal');

这会生成 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部，指示着浏览器在闲置时间预取 login-modal-chunk.js 文件。就是说，只要首页加载完成，就会在空闲时间把登录模块也加载了。

总结：

/  webpackPrefetch: true /：把主加载流程加载完毕，在空闲时在加载其他，等再点击其他时，只需要从缓存中读取即可，性能更好。推荐使用，提高代码利用率。把一些交互后才能用到的代码写到异步组件里，通过懒加载的形式，去把这块的代码逻辑加载进来，性能提升，页面访问速度更快。

/ webpackPreload: true /: 和主加载流程一起并行加载。

详细请看官方文档：prefetchingpreloading-modules