美文网首页
vue查看打包详情webpack-bundle-analyzer

vue查看打包详情webpack-bundle-analyzer

作者: hhh_hhhhhh | 来源:发表于2019-07-26 15:55 被阅读0次

    对于vue项目优化,webpack-bundle-analyzer可以让我们查看打包时项目中的依赖,删减不需要的依赖,来优化页面加载。

    安装

    npm install --save-dev webpack-bundle-analyzer
    

    配置

    在webpack.prod.conf.js中
    引入:

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

    添加配置:

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

    在package.json中
    添加指令:

    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
    

    这样可以使用npm run analyz来随时查看包的状况。
    随后的npm run build会自动执行打开可视化页面。

    相关文章

      网友评论

          本文标题:vue查看打包详情webpack-bundle-analyzer

          本文链接:https://www.haomeiwen.com/subject/hlpvlctx.html