zoukankan      html  css  js  c++  java
  • [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的:

    Visualize size of webpack output files with an interactive zoomable treemap.

    一个很强大的用来优化打包之后文件提交的工具。

    在老版本的脚手架里面已经多帮你配置好了,在 build/webpack.prod.conf.js 文件中:

    判断是否配置了 bundleAnalyzerReport,如果配置了,加载 webpack-bundle-analyzer 工具包,调用了 BundleAnalyzerPlugin,最终还是 push 到 plugins 对象中:

    
    if (config.build.bundleAnalyzerReport) {
      const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    

    config/index.js 文件中:配置了 build 对象的 bundleAnalyzerReport

    
    module.exports = {
      build: {
        bundleAnalyzerReport: process.env.npm_config_report
      }
    }
    

    那在新版本里面,我们在 vue.config.js 中如何配置呢?

    第一个想到的还是通过 chainWebpack 配置,再看看它的官方说明:

    是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。
    允许对内部的 webpack 配置进行更细粒度的修改。
    
    chainWebpack: config => {
      // ...
    }
    

    然后是如何通过 config 生成一个 plugin

    我们查看一下 webpack-chain 插件的 README.md,有如下一段:

    
    config
      .plugin(name)
      .use(WebpackPlugin, args)
    

    参照如上格式,有 2 个示例如下:

    
    // Examples
    config
      .plugin('hot')
      .use(webpack.HotModuleReplacementPlugin);
    
    config
      .plugin('env')
      .use(webpack.EnvironmentPlugin, ['NODE_ENV']);
    

    所以,照着上面的模板,我们也很简单就写出来了:

    
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    

    但是还不够,我们需要加一些限制条件,类似老版本脚手架里面的:

    
    if (process.env.npm_config_report) {
      // ...    
    }
    

    然后我们可以在 package.json 中增加 scripts:

    key 是:analyz
    value 是:npm_config_report=true npm run build

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

    来源:https://segmentfault.com/a/1190000016247872

  • 相关阅读:
    挑战程序设计竞赛第二章、贪心部分
    Life is Strange:《奇异人生》
    算法竞赛进阶指南第二章--题解
    算法竞赛进阶指南第一章题解
    2018 IEEE极限编程大赛 题解
    爬格子呀9.17(图论)
    大数模板(加减乘除幂次开方)
    地理位置(Geolocation)API 简介
    javascript闭包的理解
    H5本地离线存储
  • 原文地址:https://www.cnblogs.com/lovellll/p/10138835.html
Copyright © 2011-2022 走看看