前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件

使用vue-cli3创建了一个工程目录，技术栈为vue-cli3+vue-router+vuex+element-ui+v-charts+axios。但是等到项目开发完后，发现生成的app.js特别大，接近10M。为了优化项目性能，需要使用webpack-bundle-analyzer分析包文件，找出最占用空间的插件有哪些，对应做出优化。

安装

cnpm install webpack-bundle-analyzer -D

修改vue.config.js

module.exports = {chainWebpack: config => {if (process.env.use_analyzer) { // 分析config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}}}

修改package.json

"scripts": {"analyzer": "use_analyzer=true npm run serve"},

执行

然后运行npm run analyzer。但是我运行后发现报错了。如下：

原来由于windows下不支持xxx=xxx这种写法。为了支持这种写法，用npm安装cross-env。然后修改package.json，如下:

"analyzer": "cross-env use_analyzer=true npm run serve"

再次运行npm run analyzer，发现运行成功，打开127.0.0.1就可以看到包的情况：

注：上述已是优化后看到的图，未优化前，element-ui和v-charts占用了很大的控件。针对这两个插件做了优化后（采用CDN方式），app.js小了很多。

前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件相关推荐

【前端优化 Vue项目优化】如何避免浏览器卡顿，实现性能优化cdn？
提示:前端查漏补缺,仅代表个人观点. 文章目录一.前言二.前端优化方法 1. 减少请求,压缩文件 2. CSS和JavaScript管理 3. 设置内容缓存 4. 减少页面重定向 5. CDN网络 ...
Vue项目安装webpack遇到的问题
查看webpack版本时报错: webpack -v: CLI for webpack must be installed.webpack-cli (https://github.com/webpac ...
vue/cli4、webpack 简阅（希望能持续更新）
day1 scripts脚本命令触发至:@vue/cli-service/bin/vue-cli-service.js //获取参数: //前两个参数分别为node环境地址:运行的js文件地址: co ...
Vue优化（一）、webpack-bundle-analyzer可视化分析
前言优化可以减少请求时间,加快页面渲染速度,通过可视化分析工具给我们带来的便捷!如下图: 可以清晰看到每个文件的原始大小.解析大小.压缩后大小,根据视图将过大文件优化,就是我们主要做的事情. 安装 ...
vuejs单文件组件：安装 webpack 和 vue-cli
安装 npm npm 全称为 Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行.支持的第三方模块最多的包管理器. npm -v 由于网络原 ...
安装webpack，webpack-cli，webpack-dev-server（版本一定要兼容！）
ps:仅记录个人经验,如有错误欢迎指出与讨论,谢谢! 最近学习vue要安装webpack,webpack-cli,webpack-dev-server,由于它们的版本经常会更新导致不兼容,今天安装了一 ...
【项目相关技术】前端由来、vscode安装使用、ECMAScript 6、Vue、element-ui、Node.js、npm、模块化、WebPack
前端开发的由来? vscode安装和使用 sda ①.下载地址:[https://code.visualstudio.com/](https://code.visualstudio.com/) sda ...
vue+webpack前端开发项目的安装方法
安装前,需要进行node.npm检测,查看是否已有安装node.npm环境: 操作方法:Windows+R 调出运行框,输入cmd 调出命令框:分别输入node -v 回车(查看node版本) npm ...
前端进阶（三） webpack处理vue以及vue-cli脚手架环境
webpack处理vue 安装 vue yarn add vue vue单文件组件 single-file components(单文件组件) ,文件扩展名为 .vue 的文件,需要安装vetur插件 ...

前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件

前端优化-vue-cli4安装webpack-bundle-analyzer分析包文件相关推荐

最新文章

热门文章