使用Webpack4优化Web性能（三）

利用 Webpack 来优化 Web 性能属于_加载性能优化_的一部分： ☛ Web Performance Optimization with webpack

3、监控和分析应用程序

在开发阶段使用 webpack-dashboard 和 bundlesize 来调整应用程序的大小

• webpack-dashboard

webpack-dashboard 经过展现依赖项大小、进度和其余细节来加强 webpack 输出，有助于跟踪大型依赖项。

npm install webpack-dashboard --save-dev

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  plugins: [
    new DashboardPlugin(),
  ],
};

• bundlesize

bundlesize 用于验证 webpack 的资源不超过指定的大小，当应用程序变得太大时可以及时得知。

（1）运行打包命令
（2）开启 bundlesize

npm install bundlesize --save-dev

（3）在 package.json 中指定文件大小限制

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*.png",
      "maxSize": "16 kB",
    },
    {
      "path": "./dist/main.*.js",
      "maxSize": "20 kB",
    },
    {
      "path": "./dist/vendor.*.js",
      "maxSize": "35 kB",
    }
  ]
}

（4）执行 bundlesize

npx bundlesize

或者用 npm 执行：

// package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}

经过 webpack-bundle-analyzer 分析包的大小

webpack-bundle-analyzer 可以扫描 bundle 并对其内部内容进行可视化呈现，从而能够发现大型的或者没必要要的依赖项。

npm install webpack-bundle-analyzer --save-dev

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

运行生产构建，该插件会在浏览器中打开可视化页面。

默认状况下，统计页面显示的是已解析文件的大小（当文件出如今包中时）。您可能想比较 gzip 以后的大小，由于它更接近实际用户体验，可使用左边的边栏来切换大小。

对于报告，咱们须要关注的点有：

• 大型依赖项：为何这么大？是否有更小的替代方案（例如，用 Preact 代替 React）？您是否使用了该库包含的全部代码（例如，Moment.js 包含了许多 常常不使用且可能被删除的地区设置）？
• 重复的依赖关系：您是否看到同一个库在多个文件中重复出现？（在 webpack 4 中使用 optimization.splitChunks.chunks 将重复的依赖关系移动到一个公共文件）。或者某个包具备相同库的多个版本?
• 类似的依赖关系：是否有相似的库能够作大体相同的工做？（例如，moment 和 date-fns，或 lodash 和 lodash-es），试着只用一个工具。

总结

（1）削减没必要要的字节。压缩全部内容，删除未使用的代码，明智地添加依赖项；
（2）按路由拆分代码。只加载如今真正须要的东西，稍后再加载其余东西；
（3）缓存代码。应用程序的某些部分（如第三方库）更新的频率低于其余部分，将这些部分分离到文件中，以便只在必要时从新下载；
（4）追踪代码大小。使用像 webpack-dashboard 和 webpack-bundle-analyzer 这样的工具来了解你的应用程序有多大。

参考

• Web Performance Optimization with webpack
• Webpack docs
• webpack 4: Code Splitting, chunk graph and the splitChunks optimization
• Hash vs chunkhash vs ContentHash
• Code Splitting with React and React Router
• 一步一步的了解 webpack4 的 splitChunk 插件
• Webpack 4 配置最佳实践
• 三十分钟掌握 Webpack 性能优化
• 使用 webpack4 提高180%编译速度
• 默认分包策略
• webpack4 的30个步骤打造优化到极致的 react 开发环境，如约而至
• Webpack-dev-server的proxy用法