VueCliで作ったサイトのwebpackでbundleされたJsを可視化してJsのサイズを減らそうとします

webpackのbundle後のJavaScriptのサイズを減らしている話という記事を見て、VueCliで作られたものはどうやって可視化するんだろうと思って調べました。

最終的なやり方は下記です。

stats-webpack-plugin

まずはmoduleのインストールを行いましょう

npm install --save-dev stats-webpack-plugin 

続いて、vue.config.jsファイルを次のように変更します。

const StatsPlugin = require('stats-webpack-plugin');

module.exports = {
    configureWebpack:{
        plugins: [new StatsPlugin("stats.json", {
            chunkModules: true,
            chunks: true,
            assets: false,
            modules: true,
            children: true,
            chunksSort: true,
            assetsSort: true
        })],
    },
}

webpack-bundle-analyzer

続いてwebpack-bundle-analyzerをインストールしましょう

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

vue.config.jsの内容にwebpack-bundle-analyzerを使うぞと追記を行います

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  chainWebpack: (config) => {
    config.plugin("webpack-bundle-analyzer")
      .use(BundleAnalyzerPlugin)
      .init(Plugin => new Plugin());
  },
};

最終的なvue.config.jsはこのようになります

const StatsPlugin = require('stats-webpack-plugin');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
    configureWebpack:{
        plugins: [new StatsPlugin("stats.json", {
            chunkModules: true,
            chunks: true,
            assets: false,
            modules: true,
            children: true,
            chunksSort: true,
            assetsSort: true
        })],
    },
    chainWebpack: (config) => {
        config.plugin("webpack-bundle-analyzer")
            .use(BundleAnalyzerPlugin)
            .init(Plugin => new Plugin());
    },

}

最後に、package.jsonにコマンドを追記します。

"report": "vue-cli-service build --report-json"

お疲れさまでした

意外とかんたんでしたね！

npm run report を走らせることで、 http://127.0.0.1:8888/こんな感じでかってにブラウザが立ち上がるかと思います。

おまけ

webpack-chartというサイトに、先程のコマンドで作られたstats.jsonを放り込むと、円グラフになってサイズを教えてくれます。

以上です。

Tags

• Webpack
• Javascript
• Vue.js