首页
前端开发
Webpack
Vue CLI项目优化缩短首屏加载时间

Vue CLI项目优化缩短首屏加载时间

0 次浏览 0 条评论
pdf
pdf

首屏加载慢的 vue-cli 项目，真能让人抓狂。实习时我也踩过这坑，后来摸索出一套还不错的优化套路，分享给你参考下。核心工具是 webpack-bundle-analyzer，能可视化打包出来的 JS 文件大小，直观得。

装好插件后，npm run dev 一下，浏览器就能看到项目依赖图，默认是 8888 端口。用法也简单，webpack 里加一段插件配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
};

一看图就能知道谁在“吃内存”，是 moment 太肥？还是图表库拖了后腿？对症下药，才能真优化。比如用 dayjs 替代 moment，体积一下少一半。

要是你想玩得更深，可以看看这几篇：

如果你也在折腾 vue-cli 项目，首屏加载又慢得不行，那不妨装个 webpack-bundle-analyzer 看看，定位准了，优化才不会靠猜。

pdf 文件大小：39.96KB