分析 Vue Js 应用程序的加载时间

Question

我最近在分析任何使用 Vue 制作的应用程序。

捆绑包生成一个 3.6MB 的文件，这个有问题的应用程序加载速度非常快。

My question is: why does "936 kb transferred over network" appear there? Where was the rest of the 3.6MB loaded? Is that why the page loads so fast?

与我的 Vue 应用程序相比：

这里显示为通过网络上传的整个文件，这意味着我的浏览器必须下载整个 5.4 MB

Answer 1

可能您的包中有一些重量级的第三方库。您可以使用“webpack-bundle-analyzer”

进行分析

第 1 步：将 webpack-bundle-analyzer 添加到您的 devDependencies

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

第 2 步：将此插件添加到您的 webpack 配置中

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

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

第 3 步：您可以在每次构建后分析您的包

第 4 步：优化您的捆绑包。有几种方法，例如通过延迟加载加载一些依赖项或将加载库的方式从完整加载更改为“点菜”。有几个博客/教程解释了如何处理这个问题。

分析 Vue Js 应用程序的加载时间

Analyzing the load time of a Vue Js application

bundle

webpack

vue.js