webpack的可视化资源分析工具webpack-bundle-analyzer的使用

xiaowugui666 发布于2019-08-23 11:34 / 1519人阅读

摘要：随着项目越来约庞大，导致构建包的时候速度缓慢首先推荐使用的可视化资源分析工具。拉拉拉拉拉开心浏览器打开分析结果，大概长这个样子哟分析结果出来了，接下来就可以开始优化啦

随着项目越来约庞大，导致构建包的时候速度缓慢！

首先推荐使用wepback的可视化资源分析工具。以下给出webpack-bundle-analyzer配置【vue-cli构建项目时会自动配置好】

安装webpack-bundle-analyzer
控制台输入npm/cnpm install --save-dev webpack-bundle-analyzer

config/index.js文件中

module.exports = {
  build: {
  ...
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
  ...
}

webpack生产环境中 build/webpack.prod.conf.js文件中

...
if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
...

开始使用webpack-bundle-analyzer
控制台输入cnpm run build --report
等待构建完成后，在浏览器中输入localhost:8888打开分析结果，就可以开始分析啦。拉拉拉拉拉！开心.png
浏览器打开分析结果，大概长这个样子哟

分析结果出来了，接下来就可以开始优化啦

GPU云服务器云服务器数据可视化的工具好用的数据可视化工具免费的数据可视化工具数据的可视化分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97136.html

前端架构gulp与webpack（知识点整理）

摘要：是通过加载器和插件对资源进行处理的。另外我们知道是对整个过程进行控制，所以在其配置文件中配置的每一个对项目中该配置路径下所有的资源都可以管理。一概念介绍 gulp 是 task runner，Webpack 是 module bundler。可以这么说， Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代，或者直接说和对方不重叠的。 1 什么是gulp Gulp...

willin 2019-08-21 18:34 评论0 收藏0
webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
记一次vue-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
vue首屏加载优化

摘要：为了让事情更简单，允许将组件定义为一个工厂函数，动态地解析组件的定义。只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前首先我们在正常情况下buildshowImg(https://segmentfault.com/img...

Kaede 2019-08-20 17:44 评论0 收藏0