使用Webpack4优化Web性能（三）

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

三、监控和分析应用程序

在开发阶段使用 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用法