关于前端:webapck笔记webpack优化

36次阅读

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

打包工夫剖析工具：speed-measure-webpack-plugin

应用：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// 而后把 webpack 的配置文件包裹起来:
...
    return smp.wrap(config)

打包文件的体积剖析：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"
  )
  ]
}

正文完