之前发现一个神器，记录一下，可以可视化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. ubuntu 常用安装软件

    1. Ubuntu安装chrome. sudo apt-get install chromium-browser w

  2. JOIN 和 NULL

    NULL值得数据出现在数据库发展的最初阶段的确给开发和使用者带来了很大的便利,这是因为它为我们节省了太多的磁盘空间,而且在那个年代磁盘是相当昂贵的.但是随着科技的发展,硬件系统的改进突飞猛进,NULL ...

  3. 时间比较早晚java

    package demo; import java.text.SimpleDateFormat;import java.util.Date;import java.util.Locale; publi ...

  4. Android中当前Activity跳转到当前Activity页面

    步骤:先关闭自己,在跳转 case R.id.btn_copy:// 复制 Toast.makeText(mContext, "正在复制", Toast.LENGTH_SHORT) ...

  5. 17965 幸运之星（优先做） 约瑟夫环问题O(n)

    17965 幸运之星(优先做) 时间限制:100MS  内存限制:65535K 提交次数:0 通过次数:0 题型: 编程题   语言: G++;GCC;VC Description 每年新年派对的最后 ...

  6. Unity Transform

    public class PlayerControll : MonoBehaviour { Transform playerTransform; Animation playerAnimation; ...

  7. 性能测试工具LoadRunner14-LR之Controller 简介

    当虚拟用户开发完成之后,使用Controller将这个执行脚本的用户从单用户转化为多用户,从而模拟大量用户操作,进而形成负载.(多用户单循环,多用户多循环)我们需要对负载模拟的方式和特征进行配置. 场 ...

  8. Java基本语法_循环练习系列（一）——模拟双色球

    目前正在自学java中,学完循环这一块,简单写几个例子,使之更加熟练掌握循环语句和条件语句. 简述一下要这段代码要完成的任务: /*有33个红色球,16个蓝色球. 在33个里选6个 ,16个里选1个. ...

  9. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...

  10. 11.C#中的转义符和@符号的作用

    转义符 转义符是指一个'\'+一个特殊的字符,组成的一个具有特殊意义的字符. \n:  表示换行. namespace _11.转义符 { class Program { static void Ma ...