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

時間 2020-06-29

標籤進擊的Vue(四) webpack 打包優化简体版

原文原文鏈接

不要讓本身的上限成爲你的底線html

本文主要講如下內容。webpack-bundle-analyzer佔用統計查看全部的文件佔用狀況，使用在線cdn替換本地導入的包，使用clean-webpack-plugin清除webpack打包殘留。vue

webpack-bundle-analyzer資源佔用統計

使用webpack-bundle-analyzer插件查看項目文件資源佔用狀況。效果以下圖所示：webpack

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

先上插件，安裝：ios

npm i webpack-bundle-analyzer -D
複製代碼

而後配置webpack.config.js，這裏按照本身的習慣進行配置，怎麼舒服怎麼來：git

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
    })
  ]
}
複製代碼

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

使用在cdn在線資源

值得注意的是，有些插件會有提供開發環境的cdn資源，這些帶開發環境的cdn能夠提示你一些開發中的錯誤（雖然這些錯誤毫無影響。。），能夠根據本身的取捨去選擇。web

編輯你的默認index.html模板，加入在線資源：ajax

<!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外部擴展，不知道導入的插件函數名能夠打開源碼看看。vue-router

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

配置完畢，直接一鍵卸載項目中的庫吧：vuex

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。