之前发现一个神器，记录一下，可以可视化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. c语言中有关0和1的运算问题

    /*有关0和1 的总结 最近做题总是混淆0 和 1 对于/ 和 %运算时候的结果怎么算 所以就上机试验了一番 结论: c语言中,0/任何数都为0 0%任何数都为0 1/任何数都为0 1%任何数都余1 ...

  2. ios中页面底部输入框，position:fixed元素的问题

    在安卓上点击页面底部的输入框,软键盘弹出,页面移动上移.ios上,软件盘弹出,输入框看不到了.让他弹出时让滚动条在最低部 var u = navigator.userAgent, app = navi ...

  3. from表单，图片预览，和表单提交

    <form> <input id="file" class="topsub-file" type="file" name= ...

  4. SSM-@Transactional 注释不生效

    1.在applicationConext.xml 中配置事务注解驱动 <!-- 事务注解驱动 --> <tx:annotation-driven /> <!-- 配置事务 ...

  5. 牛客网Java刷题知识点之父类中的私有内容，子类是否具备？ 子类不可直接，但可间接访问父类中的私有内容？

    不多说,直接上干货!  父类中的私有内容,子类是否具备? 答:不具备 子类不可直接,但可间接访问父类中的私有内容 这样情况,开发中不所见,但是,面试的时候,必考非常常见.

  6. pat1080. Graduate Admission (30)

    1080. Graduate Admission (30) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...

  7. pat03-树1. 二分法求多项式单根(20)

    03-树1. 二分法求多项式单根(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 杨起帆(浙江大学城市学院) 二分法求函数根的 ...

  8. linux下Python2.7编译安装PyQt5

    ---作者吴疆,未经允许,严禁转载,违权必究--- ---欢迎指正,需要源码和文件可站内私信联系--- -----------点击此处链接至博客园原文----------- 功能说明:在ubuntu系 ...

  9. git 摘要

    git使用摘记 git冲突的问题主要是在修改的部分而不是添加的部分, 如果merge的文件在同一个位置有不同的信息则git会报错 git push origin中的origin表示的是远程的仓库名为o ...

  10. td标签里内容不换行

    在一些页面开发中,除自己操作外,引起换行的情况一般有: Ex一.td标签里内容长度过长引起换行: Ex二.div标签(或其他标记)里内容有文本和图片引起换行: 解决方法: 针对例子一用<nobr ...