之前发现一个神器，记录一下，可以可视化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. 12.标准标签库（JSTL）

    1.JSTL标签库安装 JSTL的概念: JSP标准标签库(JSP Standard Tag Library)是一个实现 Web 应用程序中常见的通用功能的定制标记库集功能包括迭代和条件判断.数据管理 ...

  2. Silverlight 中图片路径的设置

    在Silverlight中图片的设置方法有几种 如上图在一个工程中有个images文件夹,buttons.xaml页面中的Image控件要引用一张图片 第一种方法 xaml: <Image x: ...

  3. express中connect-flash中间件的使用

    在学习node的时候,flash是困扰我最久的一个中间件,之前一直都没有很好的理解,这里做一个总结. 参考自:http://yunkus.com/connect-flash-usage/ 什么是fla ...

  4. DBCP数据连接池

    package com.itheima.utils; import java.io.InputStream; import java.sql.Connection; import java.sql.R ...

  5. 揭秘企业级web负载均衡完美架构

    相信很多朋友对企业级的负载均衡高可用实例非常感兴趣,此篇文章根据成熟的线上环境而写,旨在帮助大家迅速架构一个企业级的负载均衡高可用的web环境. 此系统架构仅映射内网VIP的80及443端口于外网的J ...

  6. 导入的项目eclipse出现乱码的处理方法

    如果这样子还是出现乱码无法解决的话,则删掉当前项目重新开始项目.

  7. IIS下不能下载文件的docx文档，XLSX文档的设置方法（转）

    IIS下不能下载文件的docx文档,XLSX文档的设置方法 Office 2007的的界面风格默认格式中都是.DOCX,XLSX,PPTX等等后缀,连结中包含此类文件时,界面风格默认什么打不开的其实只 ...

  8. Javascript 对象（Object）

    //声明方式 //调用 Object构造函数创建 var user = new Object(); user.name = "小白"; user.say = function () ...

  9. BZOJ1563: [NOI2009]诗人小G(决策单调性 前缀和 dp)

    题意 题目链接 Sol 很显然的一个dp方程 \(f_i = min(f_j + (sum_i - sum_j - 1 - L)^P)\) 其中\(sum_i = \sum_{j = 1}^i len ...

  10. jQuery设置全选和全反选

    HTML 代码: <input type="checkbox" id="allChecked" onclick="setAllChecked(t ...