之前发现一个神器，记录一下，可以可视化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. 问题：git add 遇到 warning: LF will be replaced by CRLF in 警告（已解决）

    问题描述: git add file_name 提交文件时候提示 自动转换 CRLF 标识 如下图: 解决方法: 执行下面代码在命令行中执行: git config --global core.aut ...

  2. 第一章javascript简介

    javascript 当诞生于1995 最开始是目的是处理在服务器端进行的表单验证:让其在服务器端验证改为在服务端验证,大大提高速度(当时网络慢) 如今javascript是一门功能全面的语言,包含闭 ...

  3. SSMS 远程连接SERVER 设置 - Unable to connect to SQL Server instance remotely

    问题描述: 新装了一台SERVER,在SERVER本地打开SSMS链接sever,一且正常.但是用我自己local去链接的时候出现以下错误. A network-related or instance ...

  4. linux 6 查看防火墙状态及开启关闭命令

    linux 6 查看防火墙状态及开启关闭命令 https://blog.csdn.net/lv_shijun/article/details/52453882 存在以下两种方式: 一.service方 ...

  5. 移动测试之appium+python 导出报告（六）

    下载 HTMLTestRunner.py python3可以参考这个地址 这是针对Python2.7版本 test.py from appium import webdriver import tim ...

  6. (转)Python中的split()函数的用法

    Python中的split()函数的用法 原文:https://www.cnblogs.com/hjhsysu/p/5700347.html Python中有split()和os.path.split ...

  7. stm32 输入捕获学习（二）

    (本文参考STM32  开发指南 V1.3   -- ALIENTEK 战舰 STM32 开发板库函数教程 ) 1. 实验设计 我们用 TIM5 的通道 1(PA0)来做输入捕获,捕获 PA0 上高电 ...

  8. java多线程优先级问题

    java 中的线程优先级的范围是1-10,默认的优先级是5.“高优先级线程”会优先于“低优先级线程”执行. 例子: package com.ming.thread.threadpriority; pu ...

  9. pat1043. Is It a Binary Search Tree (25)

    1043. Is It a Binary Search Tree (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...

  10. Js获取移动设备分辨率

    在<head>中引入  <meta name="viewport" content="width=device-width, initial-scale ...