定位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,到后来赢得宝 ...
随机推荐
- 一文彻底明白linux中的selinux到底是什么
https://www.phpyuan.com/235739.html 一.前言 安全增强型 Linux(Security-Enhanced Linux)简称 SELinux,它是一个 Linux 内 ...
- Python函数调用
1.同级目录下的调用 - src |- mod1.py |- test1.py 若在程序test1.py中导入模块mod1.py,则直接使用 import mod1 或 from mod1 impor ...
- java 与 数据库的连接
Eclipse中使用SQL server 2017数据库 一.准备材料 要能够使用数据库就要有相应的JDBC,所以我们要去Microsoft官网下载https://www.microsoft.com/ ...
- 第8章 IO类
8.1 IO类 iostream istream, wistream从流中读取数据 ostream, wostream iostream, wiostream读写 ...
- LoadScene场景异步加载
LoadScene场景异步加载 using UnityEngine; using System.Collections; using UnityEngine.SceneManagement; usin ...
- zepto.js常用操作
zepto.js是移动端的jquery,但是并没有提供所有与jquery类似的api.Zepto设计的目的是有一个5-10k的通用库.下载并快速执行.有一个熟悉通用的API,所以你能把你主要的精力放到 ...
- 创建weblogic受管理服务器和安全文件
启动 admin server Oracle/Middleware/user_projects/domains/base_domain/bin> startWebLogic.sh 1创建受管服务 ...
- 【LDAP】Openldap导入数据
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://jerry12356.blog.51cto.com/4308715/1851186 ...
- JEECMS站群管理系统-- 标签的配置流程
以cms_content_list为例,首先,每一个标签的声明都是在jeecms-context.xml中进行的, <?xml version="1.0" encoding= ...
- Makefile2
规范 target可以是Object file, 可执行文件或者标签(标签一般没有依赖) 越靠近最终结果的target卸载越前面 定义target前, 定义CC, SRC, CFLAGS, OBJS, ...