说明

玩转 webpack 学习笔记

使用 webpack-bundle-analyzer

代码示例：

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

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

webpack优化篇（四十一）：体积分析：使用 webpack-bundle-analyzer_webpack

可以分析哪些问题？

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

实战

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

安装依赖：

npm install

webpack优化篇（四十一）：体积分析：使用 webpack-bundle-analyzer_analyzer_02

添加用法：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

webpack优化篇（四十一）：体积分析：使用 webpack-bundle-analyzer_analyzer_03

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

webpack优化篇（四十一）：体积分析：使用 webpack-bundle-analyzer_bundle_04

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

npm

然后 search 页面引入。

import "babel-polyfill"

webpack优化篇（四十一）：体积分析：使用 webpack-bundle-analyzer_bundle_05

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

// 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​​，我们就可以针对的找出问题，进行相应的处理。

webpack优化篇（四十一）：体积分析：使用 webpack-bundle-analyzer_bundle_06