您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

[分析]Webpack打包分析

写作不易,未经作者允许禁止以任何形式转载!
如果觉得文章不错,欢迎关注、点赞和分享!
掘金原文链接:[分析]Webpack打包分析

Webpack打包分析

分享时间和文件的分析工具,便于优化打包产物。

打包的时间分析

  • 如果希望看到每一个Loader、每一个Plugin消耗的打包时间,可以借助于一个插件:speed-measure-webpack-plugin

    • 注意:该插件在最新的webpack版本中存在一些兼容性的问题(和部分Plugin不兼容)
    • 截止2021-3-10日,但是目前该插件还在维护,所以可以等待后续是否更新;
  • 安装

    • npm i speed-measure-webpack-plugin
  • 使用

    • 创建插件导出的对象 SpeedMeasurePlugin;
    • 使用 smp.wrap 包裹我们导出的webpack配置;
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin()

module.exports = function (env) {
    const isProduction = env.production;
    process.env.NODE_ENV = isProduction ? "production" : "development"

    const config = isProduction ? prodConfig : devConfig
    const webpackConfig = merge(commonConfig(isProduction), config)
    return smp.wrap(webpackConfig)
}
  • 效果

image-20210502234038719

打包后的文件分析

方案一:生成stats.json文件

  • 编辑npm script
"stats": "webpack --config ./config/webpack.common.js --env production --profile --json=stats.json", 
  • 运行npm run stats

    • 根目录下生成了一个stats.json
  • json文件内容较复杂,可以将文件上传至https://webpack.github.io/analyse/进行分析

  • 效果

img

方案二:使用webpack-bundle-analyzer

  • 安装

    • npm install webpack-bundle-analyzer
  • webpack.common.js

const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer")

plugins:[
    new BundleAnalyzerPlugin()
]
  • 在打包webpack的时候,这个工具打开一个8888端口上的服务,我们可以直观的看到每个包的大小。

    • 比如有一个包是通过一个Vue组件打包的,但是非常的大,那么我们可以考虑是否可以拆分出多个组件,并且对其进行懒加载;
    • 比如一个图片或者字体文件特别大,是否可以对其进行压缩或者其他的优化处理;
  • 效果

image-20210502234139506


  • 掘金原文链接:[分析]Webpack打包分析

  • 掘金:前端LeBron

  • 知乎:前端LeBron

  • 持续分享技术博文,关注微信公众号 👉🏻 前端LeBron


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进