webpack打包之后的依赖分析

一、采用webpack-bundle-analyzer插件

　　1.安装

npm install webpack-bundle-analyzer -D

　　2.修改vue.config.js

chainWebpack: (config) => {

    if (process.env.NODE_ENV == 'production') {     // 分析

      config

        .plugin('webpack-bundle-analyzer')

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

    }

　　3.如果不想和其他node_env混在一块，生成一个单独的指令。可以用cross-env

　　

npm install --save-dev cross-env

　　4.安装完cross之后，修改packjson.js

"scripts": {
    "analyzer": "cross-env use_analyzer=true npm run build"
  },

　　5.运行分析工具

npm run analyzer 或 npm run build

 

 

二、采用官方提供的工具

　　1.全局安装webpack

npm install -g webpack

　　2.

npm i webpack-cli -g

　　3.配置打包文件

　　　在webpack.config.js里配置mode和出入口等信息。webpack4.0以上的不用配，默认入口为./src/index.js文件，默认出口为./dist/main.js文件

　　　配置文件信息比如

const path = require("path");
module.exports = { 
  entry: './src/main.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development' };

　　4.生成分析文件

webpack --profile --json > stats.json

　　5.到官网上传分析。http://webpack.github.io/analyse/