【進擊的Vue(四)】webpack打包優化

阿新 • • 發佈：2020-06-29

不要讓自己的上限成為你的底線

本文主要講以下內容。webpack-bundle-analyzer佔用統計檢視所有的檔案佔用情況，使用線上cdn替換本地匯入的包，使用clean-webpack-plugin清除webpack打包殘留。

webpack-bundle-analyzer資源佔用統計

使用webpack-bundle-analyzer外掛檢視專案檔案資源佔用情況。效果如下圖所示：

) 可以看到主要還是vue、vuex和axios佔的資源比較多（雖然說只裝了這幾個。。。）

先上外掛，安裝：

npm i webpack-bundle-analyzer -D
複製程式碼

然後配置webpack.config.js

，這裡按照自己的習慣進行配置，怎麼舒服怎麼來：

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      // 8888是預設埠號
      analyzerPort: 8888,// host地址
      analyzerHost: '127.0.0.1',/**
       * 'server','static','json','disabled'
       * server => http服務顯示
       * static => 靜態檔案
       * json => 將分析結構以 json 形式輸出
       * disabled => 不做任何行為
       * 這裡按照我的習慣是在開發的時候自動開啟瀏覽器檢視統計，打包的時候輸出在dist下
       */ 

      analyzerMode: 'static',// analyzerMode為static或json時候的輸出位置
      reportFilename: 'report.html',/**
       * 'stats','parsed','gzip'
       * stats => 開發環境中
       * parsed => 打包後
       * gzip => gzip後
       */
      defaultSizes: 'parsed',// 是否自動開啟統計頁面
      openAnalyzer: false,// generateStatsFile: false,// 如果為true，則Webpack Stats JSON檔案將在bundle輸出目錄中生成。 

      // statsFilename: 'stats.json',
      /**
       * 配置
       * https://webpack.js.org/configuration/stats/#stats-options
       */
      statsOptions: null,/**
       * 'info','warn','error','silent'
       */
      logLevel: 'info',// 用於排除分析一些檔案
      excludeAssets: null
    })
  ]
}
複製程式碼

然後啟動測試出現上面那種圖就成功了，然後接下來優化。

使用在cdn線上資源

值得注意的是，有些外掛會有提供開發環境的cdn資源，這些帶開發環境的cdn可以提示你一些開發中的錯誤（雖然這些錯誤毫無影響。。），可以根據自己的取捨去選擇。

編輯你的預設index.html模板，加入線上資源：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
</body>
</html>
複製程式碼

然後配置webpack.config.js外部擴充套件，不知道匯入的外掛函式名可以開啟原始碼看看。

module.exports = {
...
  // 外部擴充套件。
  externals: {
    vue: 'Vue',vuex: 'Vuex','vue-router': 'VueRouter',axios: 'Axios',qs: 'Qs'
  }
  ...
}
複製程式碼

配置完畢，直接一鍵解除安裝專案中的庫吧：

npm uninstall vue vuex vue-router axios qs
複製程式碼

然後重新啟動專案，專案這時候開始報錯，不要緊，把原先import進來的vue、vuex-vue-router、axios、qs全都註釋掉。比如main.js：

...
- import Vue from 'vue';
+ // import Vue from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';
- import axios from 'axios';
+ // import axios from 'axios';
import * as filters from './filter';
import './less/common.less';

Vue.prototype.$http = axios;
...
複製程式碼

如果還有報錯請檢查是否還有其它地方的檔案是import進入的

clean-webpack-plugin打包清除原有的dist資料夾

clean-webpack-plugin用於刪除清理你生成的資料夾，在最新的版本中預設清除dist資料夾，而在舊版本的使用方法會在下方註釋中提到。

安裝clean-webpack-plugin

npm i clean-webpack-plugin -D
複製程式碼

修改webpack.config.js檔案。

const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
...
module.export = {
  plugins: [
    /**
     * 舊版本需要帶入資料夾名稱
     * new CleanWebpackPlugin(['dist'])
     */
    new CleanWebpackPlugin()
  ]
}
複製程式碼

文章到這裡就結束，vue專案搭建會上傳到GitHub，需要的朋友可以自行拉取，後面的文章會以此為基礎。如果有需要優化的地方或者有更好的建議可以在評論區留言（假裝很多人看）。 Github倉庫：github.com/heiyehk/web…
程式碼分支在: /tree/dev/20200625-webpackBuildOptimize