浅析webpack-bundle-analyzer在vue-cli3中的使用

正常的使用方法

安装

npm install webpack-bundle-analyzer -D

webpack.config.js：

vue-cli3的配置方法

根目录的vue.config.js（没有则自己创建）

module.exports = {
 chainWebpack: config => {
 config
 .plugin('webpack-bundle-analyzer')
 .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 }
}

执行以下命令即可查看到结果。

npm run serve

也可以改为独立的script

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"
 }
}

那么在使用以下命令时，才会弹出analyzer

npm run analyzer

总结

以上所述是小编给大家介绍的webpack-bundle-analyzer在vue-cli3中的使用,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue CLI2升级至Vue CLI3的方法步骤

    Vue CLI2升级至Vue CLI3的方法步骤

    以下备忘升级至 Vue CLI 3.x 版本后,将项目目录改为新结构时所需做的一些改动. 1. 卸载与安装 npm uninstall vue-cli -g npm install -g @vue/cli 注:若要使用 Vue CLI 3,需将 Node 版本升级至 8.9 及以上. 当使用 nvm 管理 node 版本时,可以使用如下方式切换至需求的 Node 版本: # 安装 >= 8.9 的某个版本 nvm install 8.12.0 # 在当前 session 中使用该版本 nvm u

  • 浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    为优化vue项目性能,需要使用webpack-bundle-analyzer分析报文件,找出最占用空间的插件有哪些,对应做出优化 网上看了一些网站,有的写的太麻烦了,现将最简单的一种写出来供大家参考 安装: npm install webpack-bundle-analyzer --save-dev vue.config.js配置 module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyze

  • 一份超级详细的Vue-cli3.0使用教程【推荐】

    一份超级详细的Vue-cli3.0使用教程【推荐】

    主要内容: 零配置启动/打包一个 .vue 文件 详细的搭建过程 重点推荐:使用图形化界面创建/管理/运行项目 安装: 卸载旧版本: 如果你事先已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g Node版本要求: 3.x需要在 Node.js 8.9或更高版本(推荐8.11.0+),点击这里可以安装node 大多数人都安装过了node,使用下面的命令行 查询你的node版本 : node -v 如果你的版本不够,可

  • 详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

    最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题.分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了. 低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错.但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了.突然发现万恶的 IE 还是有点用的- 网上的文章大部分是 Vue-cli 2.x

  • vue-cli3搭建项目的详细步骤

    中文文档 https://github.com/vuejs/vue-docs-zh-cn 在安装之前请装好nodeJs 安装vue cli3 1. 检测vue 的版本 vue -V (V大写) or vue --version 2. 安装@vue/cli npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli ) 安装全局桥插件,能兼容使用vue cli2 npm install -g @vue/cli-init cmd

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • 关于Vue CLI3中启动cli服务参数说明

    目录 vue常用命令 使用命令 在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令.你可以在 npm scripts 中以 vue-cli-service.或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令. 这是你使用默认 preset 的项目的 package.json: { "scripts": {   "serve": "vue-

  • Vue CLI3中使用compass normalize的方法

    normalize:统一了基本的样式,如margin: 0;(类似compass中的reset模块) compass:对sass的封装,扩展 1.安装 npm i normalize.css compass-mixins --save-dev 1.1 normalize.cssx引用 在main.js中 import 'normalize.css' 这样就完成了引用,F12,查看 body { margin: 0; // 如果是0则说明normalize已经起作用 } 2.1 compass引用

  • Vue.js中使用Vuex实现组件数据共享案例

    当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --save 二.使用 main.js store.js .vue文件 图片中的js文件中有 三部分 分别与图片上对应 1. state中存储数据 2. 而数据的修改需要先经过action的dispatch方法 (不需要异步获取的数据可以不经过这一步,如上图) 3. 然后经过matations的commit方

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • 浅析vue cli3 封装Svgicon组件正确姿势(推荐)

    vue cli3 手把手教学封装Svgicon组件 第一步:在src文件下新建一个放置svg文件的文件夹 第二步:在components文件下新建一个Svg组件 这是一个 文件夹 专门用来存放项目里面需要使用的svg文件,比如 a.svg b.svg - svg组件源码 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconNam

  • 详解如何使用webpack在vue项目中写jsx语法

    本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

  • Vue组件中的data必须是一个function的原因浅析

    组件可以有自己的data,并且data必须是一个function. 在下面这个例子中,data 返回了一个在外部定义的对象.并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="

  • 解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里

  • 深入浅析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

随机推荐