分析得知,占用空間的大文件如下:

• .map
• vendor.[hash].js
• app.[hash].css
• 其余的大文件是一些高像素的圖片, 是否需要壓縮根據(jù)項目情況自定

一、.map文件

.map 文件是用作瀏覽器顯示詳細(xì)錯誤信息的, 只有Chrome有用, 正式環(huán)境不需要這樣的功能;

// config/index.js
productionSourceMap: false

二、vendor.[hash].js

vendor.[hash].js文件主要內(nèi)容是項目用到的第三方庫: Vue|Element-ui|Vue-router|Vuex| axios 等.
開發(fā)怎么使用沒有過多影響, 生產(chǎn)環(huán)境使用在打包的時候就會顯得非常大(Element-ui全部引用了).
所以推薦生產(chǎn)環(huán)境采用cdn的方式.

<!-- 用cdn方式引用包需要注意引用時標(biāo)注版本號 unpkg.com/:package@:version/:file 版本號依項目自定  -->
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
<script src="https://unpkg.com/element-ui@2.6.1/lib/index.js"></script>

// 然后在 build/webpack.base.conf.js 文件 => module.exports 中做如下添加
// 參考 => '項目import時用的名稱': '根據(jù)cdn引入使用的包名, 一般出自<global.xxx> xxx 就是需要用的名稱'
externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'element-ui': 'ELEMENT',
},

三、app.[hash].css

app.[hash].css文件的壓縮不是很重要, 大小異常是靜態(tài)圖片被webpack解析成base64形式
如果圖片不是特別大, 建議不做處理

// build/webpack.base.conf.js => module.exports => module 修改
// limit: 10000 => limit: 800
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 800, 
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
// limit: 10000 指的是小于100kb的圖片使用base64的方式放在 app.[hash].css 文件里引用

額外加分項

路由懶加載
參見官方詳解:Vue路由懶加載

樣式懶加載
需要用到一些插件: 根據(jù) webpack x.x 版本來選擇插件

// 引用了其他文章, 實際上也沒太搞懂
// webpack 4.x

// define require
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// use
{
  test: /\.(sc|sa|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'sass-loader',
  ]
},

new MiniCssExtractPlugin({
  filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
  chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
}),