webpack优化篇(四十一):体积分析:使用 webpack-bundle-analyzer

简介: webpack优化篇(四十一):体积分析:使用 webpack-bundle-analyzer

说明

玩转 webpack 学习笔记



使用 webpack-bundle-analyzer


代码示例:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module. exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}


构建完成后会在 8888 端口展示大小

22df89f91aff4f869baa97172612702a.png



可以分析哪些问题?


  • 依赖的第三方模块文件大小
  • 业务里面的组件代码大小


实战


参考:https://github.com/webpack-contrib/webpack-bundle-analyzer

安装依赖:

npm install --save-dev webpack-bundle-analyzer


6eb1d1bd8ad04eca8c8de1c0be6917b7.png

添加用法:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}


02df1a10d83941ed8c7a0258af2fe5b1.png


执行 npm run build,就会打开新页面 http://127.0.0.1:8888/


image.png


为了更好的看到效果,我们添加一个 babel-polyfill

npm i babel-polyfill -S


然后 search 页面引入。

import "babel-polyfill"


c4ecce21af7d478d9aac865909f889f8.png


另外,在注释掉提取出来的

// new HtmlWebpackExternalsPlugin({
//    externals: [
//         {
//             module: 'react',
//             entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
//             global: 'React',
//         },
//         {
//             module: 'react-dom',
//             entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
//             global: 'ReactDOM',
//         },
//     ]
// }),


然后打包 npm run build,我们就可以针对的找出问题,进行相应的处理。

27ae59c282464ab9b38c802bc23119d7.png



目录
相关文章
|
1月前
|
缓存 JavaScript 前端开发
探讨如何通过一系列优化策略来提升TypeScript与Webpack的构建性能。
【6月更文挑战第11天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。通过这些方法,可以提升构建速度,提高开发效率。
59 0
|
2月前
|
JSON 前端开发 JavaScript
webpack学习笔记--优化
webpack学习笔记--优化
|
8天前
|
缓存 JSON 前端开发
Webpack打包优化实践
【7月更文挑战第17天】Webpack的打包优化是一个持续的过程,需要开发者根据项目的实际情况选择合适的优化策略。通过拆分代码、压缩代码、使用Tree Shaking、优化加载器配置、利用缓存以及进行性能分析,我们可以有效提升Webpack的打包效率和应用的加载
|
2月前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
|
2月前
|
缓存 前端开发 算法
Webpack 进阶:深入理解其工作原理与优化策略
Webpack 进阶:深入理解其工作原理与优化策略
94 2
|
2月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
2月前
|
缓存 前端开发 JavaScript
|
2月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
65 1
|
2月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
62 0
|
2月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
37 0