vue 单页面性能优化篇-工具

一、首次加载无用文件

要想知道网站实际使用了多少 JavaScript 代码，我们可以转到 devtools -> cmd + shift + p -> type coverage -> 单击“record”，然后应该能够看到实际使用了多少下载的代码。

image.png

标记为红色的都是当前路由不需要的东西，可以延迟加载。如果你使用了源映射，可以单击列表中的任意一个文件，看看是哪些部分没有被调用到。可以看到，即使是 vuejs.org 也还有很大的改进空间。

二、webpack-bundle-analyzer打包文件分析工具

1、安装

npm intall webpack-bundle-analyzer –save-dev

2、配置

在build/webpack.prod.config.js中的module.exports = webpackConfig这句话的上面增加

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

3、运行

使用命令npm run build --report

4、结果

image.png

注：如果脚手架自带了，直接npm run build --report就可以