很多猿猿有安裝打包詳情分布插件 但舊版的都只能在打包后在終端命令框中看到每個打包后的文件的大小，無法查看每個文件具體打包了哪些東西，這里推薦安裝使用最新的webpack-bundle-analyzer?—— Webpack 插件和 CLI 實用程序，她可以將打包后的內(nèi)容束展示為方便交互的直觀樹狀圖，讓你明白你所構(gòu)建包中真正引入的內(nèi)容；我們可以借助她，發(fā)現(xiàn)它大體有哪些模塊組成，找到不合時宜的存在，然后優(yōu)化它。
安裝：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)，默認(rèn)會打開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 展示如下頁面：
你可以根據(jù)打包前各個文件占的大小按需將較大的以<script></script>標(biāo)簽的形式在index.html中插入，
注意：注意js文件插入的位置最好在</body>上方，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為全局變量名
