之前发现一个神器，记录一下，可以可视化webpack打包的每个js文件大小，这样对我们优化代码是有帮助的，有目标的

https://www.npmjs.com/package/webpack-bundle-analyzer

这是wbpack-bundle-analyzer这个工具的地址

1、在package.json加入这行命令  “analyz”: “NODE_ENV=production npm_config_report=true npm run build”

2、安装webpack-bundle-analyzer cnpm install --save-dev webpack-bundle-analyzer

3、在webpack.config.js里增加如下代码

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// ...

plugins: [new BundleAnalyzerPlugin()]

// ...

4、运行analyz npm run analyz 默认会打开 http://127.0.0.1:8888 作为展示

定位webpack文件大小的更多相关文章

  1. 详解前端模块化工具-webpack

    webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...

  2. 前端模块化工具-webpack

    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...

  3. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  4. 使用 babel-loader（webpack）

    参考: https://www.jianshu.com/p/d971bffff546 定位 Webpack 速度慢的原因 打包的命令webpack后加三个参数: --colors 输出结果带彩色,比如 ...

  5. [转] Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  6. Webpack 性能优化 （一）（使用别名做重定向）

    前言 Webpack 是 OneAPM 前端技术栈中非常重要的一部分.它非常好用,假设你还不了解它,建议你阅读这篇Webpack 入门指迷,在 OneAPM 我们用它完毕静态资源打包.ES6 代码的转 ...

  7. webpack打包性能分析

    1. 如何定位webpack打包速度慢的原因 首先需要定位webpack打包速度慢的原因,才能因地制宜采取合适的方案,我们可以在终端输入: webpack --profile --json > ...

  8. webpack体积优化篇一

    定位 webpack 大的原因   这里推荐使用 webpack-bundle-analyzer —— Webpack 插件和 CLI 实用程序,她可以将内容束展示为方便交互的直观树状图,让你明白你所 ...

  9. Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

随机推荐

  1. sql replace()函数的用法

    replace()函数的用法: replace('带操作的字符串','被换掉的内容'[要换的内容,可写可不写默认为null]) 先上一张图 下面我门对jxid进行操作: select replace( ...

  2. C++标准库vector及迭代器

    vector是同一种对象的集合,每个对象都有一个对应的整数索引值.和string对象一样,标准库将负责管理与存储元素相关的类存.引入头文件 #include<vector> 1.vecto ...

  3. java生成字母首位8位随机码

    public String getRedomchar(){ String[] char1 = new String[] { "a", "b", "c& ...

  4. java多线程(一)

    一.进程,线程,并发,并行 1.1 进程和线程的区别       进程是指:一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程中可以启动多个线程.比如在Windows系统中,一个运 ...

  5. android Activity启动过程(三)从栈顶Activity的onPause到启动activityon的Resume过程

    ActivityStack.startPausingLocked() IApplicationThread.schudulePauseActivity() ActivityThread.sendMes ...

  6. gitee 搭建自己的代码仓库

    git是什么? 还是科普一下吧:Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理(来自我大百度) 现在越来越多的公司已经使用git来进行项目的版本管理,,使用起来 ...

  7. Dropping Balls UVA - 679（二叉树的遍历）

    题目链接:https://vjudge.net/problem/UVA-679 题目大意:t组样例,每组包括D M   层数是D   问第M个小球落在哪个叶子节点?    每个节点有开关  刚开始全都 ...

  8. Murano Weekly Meeting 2016.06.14

    Meeting time: 2016.June.14 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: 1. ...

  9. verilog if语句

    a.基本形式 1) if(表达式) 语句1: 2)if(表达式) 语句1: else 语句1 3) if(表达式1) 语句1: else   if(表达式2) 语句2: else   if(表达式3) ...

  10. pat1048. Find Coins (25)

    1048. Find Coins (25) 时间限制 50 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Eva loves t ...