zoukankan      html  css  js  c++  java
  • 定位webpack文件大小

    之前发现一个神器,记录一下,可以可视化webpack打包的每个js文件大小,这样对我们优化代码是有帮助的,有目标的

    https://www.npmjs.com/package/webpack-bundle-analyzer

    这是wbpack-bundle-analyzer这个工具的地址

    1、在package.json加入这行命令  “analyz”: “NODE_ENV=production npm_config_report=true npm run build”

    2、安装webpack-bundle-analyzer cnpm install --save-dev webpack-bundle-analyzer

    3、在webpack.config.js里增加如下代码

     

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

    // ...

    plugins: [new BundleAnalyzerPlugin()]

    // ...

     

    4、运行analyz npm run analyz 默认会打开 http://127.0.0.1:8888 作为展示

  • 相关阅读:
    webpack入坑之旅(五)加载vue单文件组件
    webpack入坑之旅(四)扬帆起航
    webpack入坑之旅(三)webpack.config入门
    webpack入坑之旅(二)loader入门
    模块的总结
    项目中的bug
    详解懒汉模式和饿汉模式以及他们的改进
    感悟(岁月)
    浅谈js中的this的用法
    图解http协议(一章了解web及其网络基础h)
  • 原文地址:https://www.cnblogs.com/wzndkj/p/7609002.html
Copyright © 2011-2022 走看看