利用report分析vue项目中各文件大小

 更新时间:2023年06月08日 14:45:40   作者:小曲曲  
这篇文章主要介绍了利用report分析vue项目中各文件大小问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

report分析vue项目中各文件大小

vendor.js

在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。

若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验。

vue-cli 4 使用report分析vendor.js

Vue Cli(@/vue/cli)自带的webpack包体积优化工具,它可以查看各个模块的size大小,方便优化。

只需要在build后面加上 --report 参数即可。

1、 我们把命令配置到package.json里

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "report": "vue-cli-service build --report"  //加入该行
},

2、执行npm run report 打包并生成report

注意:网上很多说要先安装webpack-bundle-analyzer包,其实不需要安装。

3、运行 npm run report 后

会在 build 的同时,在dist目录会生成一个report.html,打开后可看到各文件占用大小

vue项目打包文件大小分析

vuecli3.0项目搭建与webpack-bundle-analyzer分析

首先说一下vuecli低版本与cli3.0的项目结构的区别   

少了build config 文件夹  如果需要进行webpack等配置 

需要在根目录新建  vue.config.js

cli低版本

cli高版本

vue.config.js 文件内容   本次只记录  打包大小分析以及优化包大小

module.exports = {
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',
  // webpack-dev-server 相关配置
  devServer: {
    // 默认打开浏览器
    open: true,
    // 端口号
    port: 8080,
  },
  // webpack 配置
  chainWebpack: (config) => {
    // 第一 增加打包文件大小分析
    if (process.env.use_analyzer) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  },
  //webpack配置
  configureWebpack: config => {
      //警告 webpack 的性能提示
      config.performance = {
        hints: 'warning',
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000,
        //只给出 js 文件的性能提示
        assetFilter: function (assetFilename) {
          return assetFilename.endsWith('.js');
        }
      },
      // 打包忽略
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT'
        }
  }
}

第一 打包分析 webpack-bundle-analyzer 

首先 下载依赖  npm intall webpack-bundle-analyzer –save-dev

其次  在vue.config.js文件配置  

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

   

可以再package.json加入启动的命令

"scripts": {
"analyz": "use_analyzer=true npm run serve"
}

效果图

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    实例详解Vue项目使用eslint + prettier规范代码风格

    这篇文章主要介绍了Vue项目使用eslint + prettier规范代码风格,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2018-08-08
  • Vue实现Chrome小恐龙游戏的示例代码

    Vue实现Chrome小恐龙游戏的示例代码

    Google 给 Chrome 浏览器加了一个有趣的彩蛋,本文就详细的介绍一下Vue实现Chrome小恐龙游戏的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • 浅谈Vue的加载顺序探讨

    浅谈Vue的加载顺序探讨

    本篇文章主要介绍了Vue的加载顺序探讨,详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue3中reactive和ref函数及对比分析

    vue3中reactive和ref函数及对比分析

    这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • vue前端优雅展示后端十万条数据面试点剖析

    vue前端优雅展示后端十万条数据面试点剖析

    这篇文章主要为大家介绍了vue前端优雅展示后端十万条数据的考点剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 可能是全网vue v-model最详细讲解教程

    可能是全网vue v-model最详细讲解教程

    Vue官网教程上关于v-model的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下,下面这篇文章主要给大家介绍了关于vue v-model最详细讲解的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue使用反向代理解决跨域问题方案

    vue使用反向代理解决跨域问题方案

    这篇文章主要为大家介绍了vue使用反向代理解决跨域问题方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • vue项目中的类使用方式

    vue项目中的类使用方式

    这篇文章主要介绍了vue项目中的类使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 使用axios发送post请求,将JSON数据改为form类型的示例

    使用axios发送post请求,将JSON数据改为form类型的示例

    今天小编就为大家分享一篇使用axios发送post请求,将JSON数据改为form类型的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue使用jsonp抓取qq音乐数据的方法

    vue使用jsonp抓取qq音乐数据的方法

    这篇文章主要介绍了vue使用jsonp抓取qq音乐数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06

最新评论