vue 查看dist文件里的结构(多种方式)

场景：优化打包后的代码，提高性能。

1.方式一：report-json。

　　1.1 package.json文件里加入以下命令，

"report": "vue-cli-service build --report-json"

　　1.2 然后控制台运行 npm run report

　　1.3 结果：会在dist文件夹里生成 report.json。里面有打包后每个文件的来源。

2.方式二：使用 stats-webpack-plugin 插件。

　　2.1  安装 npm install stats-webpack-plugin  --save-dev

　　2.2 修改 vue.config.js 文件的 configureWebpack， 如下：

const StatsPlugin = require('stats-webpack-plugin');

module.exports = {
  configureWebpack:{
    plugins: [new StatsPlugin('stats.json', { // 查看stats
      chunkModules: true,
      chunks: true,
      assets: false,
      modules: true,
      children: true,
      chunksSort: true,
      assetsSort: true
    })],
  },
};

　　2.3 结果：会在文件根目录生成一个 stats.json 文件

　　2.4 打开 http://alexkuz.github.io/webpack-chart/  这个网站， 打开2.3步骤里生成的stats.json。例如：

3.方式三：使用 webpack-bundle-analyzer

　　3.1 安装 npm install webpack-bundle-analyzer --save-dev

　　3.2 修改 vue.config.js 文件里的 chainWebpack。如下：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  chainWebpack: (config) => {
    config.plugin('webpack-bundle-analyzer') // 打包分析
      .use(BundleAnalyzerPlugin)
      .init(Plugin => new Plugin());
  },
};

　　3.3 会自动在本地起一个服务，查看到生成文件的关系图。

4.再推荐一个网站分析的网站 https://gtmetrix.com/

总结

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

赞 (0)

相关推荐

  • vue-cli 3.x 修改dist路径的方法

    一些牢骚 前端的世界真的太奇妙,更新速度真的跟火箭一样.没有一颗真正热爱它的心,真的很难继续走下去.前段时间 Node 之父 Ryan Dahl 发布新的开源项目 deno,受到了大量的关注.Ryan Dahl直言node是一个失败品,充斥很多bug和设计上的不合理,导致他也无力回天.....天啦撸,可怜我们这种小前端,node还没开始,马上就要结束了.... 好的吧,牢骚归牢骚,生活还得继续.生命不息,撸码不止. webpack4 最近在一个项目中,将vue-cli更新到了最新版的3.x.同时

  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

  • vue本地打开build后生成的dist文件夹index.html问题

    1.问题描述: npm run build 在dist 文件生成了 index 和 static 文件夹,为什么本地打开不了,给后端就能打开? 如何才能像访问 npm run dev 的地址那样访问? 2.种简单方法 2.1 修改配置在本地访问 更改一些路径参数后,然后再次运行npm run build 就可以在本地打开index.html 改哪里? config/index.js文件 build: { assetsPublicPath: '/' } 改成 build: { assetsPubl

  • vue 地区选择器v-distpicker的常用功能

    今天给大家推荐一款好用的vue插件,地区选择器 v-distpicker ,接下来我给大家介绍一些常用的功能 1.引入插件(截图官网并解释) 2.使用插件(截图官网并解释) 就是这么简单,只需写个<v-distpicker></v-distpicker>标签,就会出现地区选择器,并且全国匹配城市(有插件就是好,直接拿来用) 3.与后端进行接口联调------------- 重点来啦!!! 前端之所以使用 地区选择器 ,目的就是为了提交用户选择的地区信息,最终通过接口传递给后端人员处

  • 详解VUE-地区选择器(V-Distpicker)组件使用心得

    废话不多说,直接进入正题. 安装,引用,这些直接从官网拷贝来的,就不多说了. 1.安装 使用 npm 安装: npm install v-distpicker --save 使用 yarn 安装 yarn add v-distpicker --save 2.使用 注册组件 注册全局组件 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker); 注册组件 import VDistpicker

  • 解析Vue2 dist 目录下各个文件的区别

    vue2 经过 2.2 版本升级后, 文件变成了 8 个: vue.common.js vue.esm.js vue.js vue.min.js vue.runtime.common.js vue.runtime.esm.js vue.runtime.js vue.runtime.min.js 瞬间就懵逼了, 这些文件该怎么选? 下面就来说下, 这 8 个作用都用在什么场景, 有什么区别 按照构建方式分, 可以分成 完整构建(包含独立构建和运行时构建) 和 运行时构建 按照规范分, 可以分成 U

  • vue如何自动化打包测试环境和正式环境的dist/test文件

    使用vue现在已经差不多2年了,想起来两年前的一次和某阿里处理的技术大牛(当时我们的技术总监)一起开发一个SPA项目的时候被硬着头皮去解决的一个难题,因为技术老大是阿里出身的,所以很多东西都是比较倾向于自动化,从项目ui设计到项目管理,到打包测试,到发布全部都要求我们要实现自动化,尽可能的减少手动操作. 当时技术大佬要求的事在jenkins进行一键打包,就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包,刚刚接触vue的我摸不着头脑,老大给了我一天时间研究这个玩意,没

  • vue 查看dist文件里的结构(多种方式)

    场景:优化打包后的代码,提高性能. 1.方式一:report-json. 1.1 package.json文件里加入以下命令, "report": "vue-cli-service build --report-json" 1.2 然后控制台运行 npm run report 1.3 结果:会在dist文件夹里生成 report.json.里面有打包后每个文件的来源. 2.方式二:使用 stats-webpack-plugin 插件. 2.1  安装 npm ins

  • vue引用js文件的多种方式(推荐)

    1.vue-cli webpack全局引入jquery (1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖.) (2)在webpack.base.conf.js里加入 var webpack = require("webpack") (3)在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChu

  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

  • 如何本地运行vue dist文件

    如何本地运行vue dist文件

    目录 本地运行vue dist文件 静态资源路径问题——空白页面 dist文件在本地运行 运行dist打包文件:简单得很!!! 本地运行vue dist文件 vue打包命令 npm run build 运行这个命令会在目录中生成一个dist文件夹 在服务器部署vue项目只需要把这个文件夹给后台就可以了 但是打包之后我们需要在本地先自测一下,下面就是踩过的一些坑: 静态资源路径问题——空白页面 解决方法: 1.打开脚手架的config文件中的index.js文件, 把build对象内的assets

  • vue编译打包本地查看index文件的方法

    /build/config/index.js assetsPublicPath: './'(编译出来可以本地查看,'/'没有点的就直接发布到线上) 以上这篇vue编译打包本地查看index文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue实现组件间通信的几种方式(多种场景)

    Vue实现组件间通信的几种方式(多种场景)

    目录 1.Props 父 >>> 子  (Props) 子 >>> 父 ($emit) 2.Bus事件总线 3.Vuex状态管理库 4.Router 5.缓存 以下是我在开发中用到过的vue组件之间的通信方式,不同的场景使用不同的方式,基本满足所有开发场景中的通信需求,从最简单的事例着手,讲述如何使用,话不多说直接开始,满满的干货,建议看完. 1.Props 父 >>> 子  (Props) 一个组件里面引入另外一个组件,此时构成了一种"父子

  • Linux 下各个文件夹的结构说明及用途介绍(超详细)

    linux下各文件夹的结构说明及用途介绍: 下面给大家分享下 linux下各文件夹的结构说明及用途介绍--电子版 /bin:二进制可执行命令. /dev:设备特殊文件. /etc:系统管理和配置文件. /etc/rc.d:启动的配 置文件和脚本. /home:用户主目录的基点,比如用户user的主目录就是/home/user,可以用~user表示. /lib:标准程序设计库,又 叫动态链接共享库,作用类似windows里的.dll文件. /sbin:系统管理命令,这 里存放的是系统管理员使用的管

随机推荐