之前发现一个神器，记录一下，可以可视化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. Python练习六十：网页分析，找出里面的正文与链接

    网页分析,找出里面的正文与链接 代码如下: from urllib import request from bs4 import BeautifulSoup request = request.url ...

  2. python文件引用其他文件中的变量

    问题: 然后再另一个文件中引用该变量 报错:Cannot find reference 'User_Agent' in '__init__.py' less... (Ctrl+F1) 正确写法: fr ...

  3. java编程--03介绍关于日期常用的计算

    /** * 获取2个日期之间的天数差 * d2-d1 * @return * @throws Exception * @Description: */ public static int getDif ...

  4. 查询pthread库的函数

    首先需要先安装pthread看的手册文档,然后用如下命令查询: man -k pthread

  5. U盘中毒问题解决

    背景: 最近在学校的打印店里打印东西,结果过了一段时间再使用的时候发现,U盘中的文件夹都成了快捷方式,只有一个pdf文件是好的,无奈,其中有比较重要的东西,所以寻求解决办法,最终解决,为方便以后查阅, ...

  6. Spring Boot实战(2) Spring常用配置

    1. Bean的Scope scope描述Spring容器如何新建Bean的实例.通过注解@Scope实现,取值有: a. Singleton:一个Spring容器中只有一个Bean的实例.此为Spr ...

  7. SSL、数字签名、CA 工作原理

    SSL.数字签名.CA 工作原理 对称加密和非对称加密介绍和区别 什么是对称加密技术?   对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥,即加密密钥也可以用作解密密钥,这种方 ...

  8. wait/notify

    某面试题,实现一个生产者——消费者模型 题目:采用多线程技术,通过wait/notify,设计实现一个符合生产者和消费者问题的程序,对某一个对象(枪膛)进行操作,其最大容量是20颗子弹,生产者线程是一 ...

  9. Maven，SVN，快捷键，数据库等

    1.Eclipse中Maven的搭建: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven 下载地址: http://maven. ...

  10. kafka brokers配置参数详解

    基本配置如下: -broker.id-log.dirs-zookeeper.connect Topic-level配置以及其默认值将在下面讨论. Property Default Descriptio ...