zoukankan      html  css  js  c++  java
  • webpack-bundle-analyzer插件的使用方式

     

    webpack-bundle-analyzer打包文件分析工具

    这是一个webpack的插件,需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告,帮助提升代码质量和网站性能

     1 npm install --save-dev webpack-bundle-analyzer //安装webpack-bundle-analyzer

    2 npm install cross-env –save -dev //解决 'NODE_ENV' 不是内部或外部命令,也不是可运行的程序或批处理文件 的报错 

     1 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
     2 /* webpack.base.conf.js文件中 */
     3 module.exports = vuxLoader.merge(webpackConfig, {
     4   plugins: [
     5     new BundleAnalyzerPlugin({
     6       analyzerMode: "server",
     7       analyzerHost: "127.0.0.1",
     8       analyzerPort: 8888, // 运行后的端口号
     9       reportFilename: "report.html",
    10       defaultSizes: "parsed",
    11       openAnalyzer: true,
    12       generateStatsFile: false,
    13       statsFilename: "stats.json",
    14       statsOptions: null,
    15       logLevel: "info"
    16     })
    17   ]
    18 });
    19 
    20 /* package.json文件中 */
    21 "scripts": {
    22     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --hot",
    23     "start": "npm run dev",
    24     "unit": "jest --config test/unit/jest.conf.js --coverage",
    25     "e2e": "node test/e2e/runner.js",
    26     "test": "npm run unit && npm run e2e",
    27     "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    28     "build": "node build/build.js",
    29     "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
    30   }

    运行

    npm run analyz
  • 相关阅读:
    php 实现店铺装修3
    脸如何瘦
    第一次约会看电影的细节 了解好男人的标准看他是否合格
    14细节 看男人爱你到什么程度:第一次约会时他沉默寡言
    男生第一次约会穿什么?
    提高心理素质 2
    心理素质差的原因
    如何提高心理素质
    不适合做老婆的女人,五大特质(转载)
    心理素质差的表现
  • 原文地址:https://www.cnblogs.com/studyWeb/p/13386113.html
Copyright © 2011-2022 走看看