webpack打包体积优化，详细分布查看插件 webpack-bundle-analyzer

很多猿猿有安装打包详情分布插件 但旧版的都只能在打包后在终端命令框中看到每个打包后的文件的大小，无法查看每个文件具体打包了哪些东西，这里推荐安装使用最新的webpack-bundle-analyzer —— Webpack 插件和 CLI 实用程序，她可以将打包后的内容束展示为方便交互的直观树状图，让你明白你所构建包中真正引入的内容；我们可以借助她，发现它大体有哪些模块组成，找到不合时宜的存在，然后优化它。

安装：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 文件中注入如下命令，以方便运行她(npm run analyz)，默认会打开http://127.0.0.1:8888作为展示。

“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

这样运行npm run build后浏览器会自动打开127.0.0.1:8888 展示如下页面：

webpack-bundle-analyzer

你可以根据打包前各个文件占的大小按需将较大的以标签的形式在index.html中插入，

注意：注意js文件插入的位置最好在上方，js可以存在static文件夹下，也可以以cdn的方式引入，jQuery最好不要用，有用到最好以这种方式引入，这玩意儿占体积很大，大的插件都可以以这种方式引入，尽量避免引入过多的UI框架，一套就够了，同理大的css文件也可以在index.html中引入，但也不是吧所有的公用文件都在首页引入，这样vander就没存在的必要了

同时将代码中的import引入的文件注释掉，这样会大大减小vander文件的体积，显著改善首次加载速度。

同时，注释掉的import引入的js要在webpack.base.conf.js中进行声明：

比如你注释掉了import Vue from 'vue'   import axios from 'axios'和import $ from 'jquery',

你需要在webpack.base.conf.js下的

module.exports = {

  entry: {

    app: './src/main.js'

  },

  externals: {

    "vue": "Vue",

    "axios":"axios",

    "jquery":"$"

  },

externals中进行声明，key为引入的包名，value为全局变量名