关于前端:webapck笔记webpack优化

34次阅读

共计 1378 个字符,预计需要花费 4 分钟才能阅读完成。

  1. 打包工夫剖析工具:speed-measure-webpack-plugin

应用:

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// 而后把 webpack 的配置文件包裹起来:
...
    return smp.wrap(config)
  1. 打包文件的体积剖析:webpack-bundle-analyzer,
    应用:

    // 导入
    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
    // 应用(plugin 中)new BundleAnalyzerPlugin({
                 "analyzerHost": 7987,
                 analyzerHost: "127.0.0.1",
                 "analyzerMode": "static"
             }),

    配置项:

    const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
    
    module.exports = {
      plugins: [
     new BundleAnalyzerPlugin({
     //  能够是 `server`,`static` 或 `disabled`。//  在 `server` 模式下,分析器将启动 HTTP 服务器来显示软件包报告。//  在“动态”模式下,会生成带有报告的单个 HTML 文件。//  在 `disabled` 模式下,你能够应用这个插件来将 `generateStatsFile` 设置为 `true` 来生成 Webpack Stats JSON 文件。analyzerMode: "server",
     //  将在“服务器”模式下应用的主机启动 HTTP 服务器。analyzerHost: "127.0.0.1",
     //  将在“服务器”模式下应用的端口启动 HTTP 服务器。analyzerPort: 8866,
     //  门路捆绑,将在 `static` 模式下生成的报告文件。//  绝对于捆绑输入目录。reportFilename: "report.html",
     //  模块大小默认显示在报告中。//  应该是 `stat`,`parsed` 或者 `gzip` 中的一个。//  无关更多信息,请参见“定义”一节。defaultSizes: "parsed",
     //  在默认浏览器中主动关上报告
     openAnalyzer: true,
     //  如果为 true,则 Webpack Stats JSON 文件将在 bundle 输入目录中生成
     generateStatsFile: false,
     //  如果 `generateStatsFile` 为 `true`,将会生成 Webpack Stats JSON 文件的名字。//  绝对于捆绑输入目录。statsFilename: "stats.json",
     //  stats.toJson()办法的选项。//  例如,您能够应用 `source:false` 选项排除统计文件中模块的起源。//  在这里查看更多选项:https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
     statsOptions: null,
     logLevel: "info"
      )
      ]
    }

正文完
 0