定位webpack文件大小
之前发现一个神器,记录一下,可以可视化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文件大小的更多相关文章
- 详解前端模块化工具-webpack
webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...
- 前端模块化工具-webpack
详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...
- Webpack 打包之体积优化
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- 使用 babel-loader(webpack)
参考: https://www.jianshu.com/p/d971bffff546 定位 Webpack 速度慢的原因 打包的命令webpack后加三个参数: --colors 输出结果带彩色,比如 ...
- [转] Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- Webpack 性能优化 (一)(使用别名做重定向)
前言 Webpack 是 OneAPM 前端技术栈中非常重要的一部分.它非常好用,假设你还不了解它,建议你阅读这篇Webpack 入门指迷,在 OneAPM 我们用它完毕静态资源打包.ES6 代码的转 ...
- webpack打包性能分析
1. 如何定位webpack打包速度慢的原因 首先需要定位webpack打包速度慢的原因,才能因地制宜采取合适的方案,我们可以在终端输入: webpack --profile --json > ...
- webpack体积优化篇一
定位 webpack 大的原因 这里推荐使用 webpack-bundle-analyzer —— Webpack 插件和 CLI 实用程序,她可以将内容束展示为方便交互的直观树状图,让你明白你所 ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
随机推荐
- mybatis主键是在insert前生成还是之后生成
oracle sequence 推荐每个表使用自己的sequence mysql 使用每个表的autoincreate来当主键 mybatis 操作insert时 主键的生成是在插入之前 还是之后? ...
- ubuntu14.04&matlab2015b 测试caffe的Matlab接口
Step1: 修改caffe-master中的Makefile.config 提示:可以到文件中直接“ctrl+f”,键入相应大写字母即可查找到相应位置. Step2:编译接口.如果之前编译caffe ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- Hive 变量和属性
Hive 中变量和属性命名空间 下面我们来用几个例子操作下: &hive SLF4J: Class path contains multiple SLF4J bindings.SLF4J: F ...
- oracle 用mybatis生成主键
oracle主键是不能像mysql一样自动管理的,需要自己手动管理,先生成,再插入. <selectKey keyProperty="id" resultType=" ...
- 3d Max 2015安装失败怎样卸载3dsmax?错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- 编译opencv python接口
首先,安装依赖1 sudo apt-get install build-essential 2 sudo apt-get install cmake git libgtk2.0-dev pkg-con ...
- jemeter排至数据库时报:Access denied for user 'root'@'localhost' (using password:YES) 解决方案
相信这个问题大部分人都遇到过,至少我遇到过三次了,而且每次原因都不一样,前段时间同学也遇到这个问题,问我怎么解决,我把我的解决思路都说了一遍,发现还不行,最后居然是另外一个原因...哎,说多了都是泪, ...
- 关于get_magic_quotes_gpc()函数(交互数据转义的判断)
在PHP中get_magic_quotes_gpc()函数是内置的函数,这个函数的作用就是得到php.ini设置中magic_quotes_gpc选项的值. 那么就先说一下magic_quotes_g ...
- MVC分页技术
这个是用的插件分页技术 前台引用和js <script type="text/javascript" src="/js/jquery-1.10.2.min.js&q ...