Vue發佈過程當中遇到坑，以及webpack打包優化

前言

• 這段時間，本人本身作了一個vue畫面部署到本身的服務器上，發現運行速度慢的的驚人，雖然服務器很渣（本人沒什麼錢，只能租最差的服務器，主要是給本身學習用的），可是這樣開發出來的網站簡直不能用，因此就查閱各類資料和網站，一步一步把代碼包優化。這篇文章主要是把我調優的過程記錄下來。
• 項目的基礎框架是經過TypeScript官網取得的。各類基礎框架模版
• 項目的構成 vue + ant-design + mysql + TypeScript
• vue項目地址
• 最後，關於如何在vue裏面實現按需加載，請自行查閱相關資料。以及，webpack的基礎知識本文也不作介紹，能夠參照我github的 學習筆記
• [原文地址](http://shenxf.top/2019/05/16/20190516-vueSpeedUp/)

調優過程

1. 禁用webpack的devtools

• 打包出來的js文件很是大，每一個js文件居然達到了3～4Mbs，這樣的體積對於個人服務帶寬來講根本負擔不起。打開畫面必卡。
• 究其緣由，是由於webpack裏面啓用了sourceMap，以便於調試。可是這在發佈之後就徹底沒有用了。
• webpack配置，裏面有這句話，把這句話註釋掉。本來3～4Mbs的文件，變成了1Mbs文件。壓縮了3倍以上。

• // 啓用sourceMap
  devtool: '#source-map'

   

2. 抽離css樣式等

• 這個雖然對於改善效果不明顯，可是好的分類對於發現問題的本質有很大的幫助。另外，css樣式分離後要本身進行壓縮。

  // *************webpack須要引入的包*************************
  // 抽離css樣式
  let MiniCssExtractPlugin = require('mini-css-extract-plugin');
  // 用來壓縮分離出來的css樣式
  let OptimizeCss =  require('optimize-css-assets-webpack-plugin'); // 用來壓縮js let UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // *************webpack相關配置部分************************* module.exports = { optimization: { // 優化項  minimizer: [ new OptimizeCss(), // 壓縮css new UglifyJsPlugin({ // 壓縮js cache: true, // 是否用緩存 parallel: true, // 併發打包 sourceMap: false, // es6 -> es5 轉換時會用到  }), ], } // 中間部分省略 // 抽離css樣式  plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].css', // 抽離出來樣式的名字  }), ], }

   

• 抽離以後，如今項目生成文件的大小是這樣。
  JS文件的大小

3. 啓用依賴關係可視化工具

• 完成上面工做以後，陷入了茫然，網站仍是很卡，不知道還能怎麼調優，在翻閱了不少網站資料之後，發現了一個依賴關係可視化工具，這對於我來講是一個重大的突破口

  // 依賴關係可視化
  // *************webpack須要引入的包*************************
  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  
  // *************webpack相關配置部分*************************
  module.exports = { // 啓動依賴關係可視化窗口，綁定端口8919  plugins: [ new BundleAnalyzerPlugin({ analyzerPort: 8919 }), ], }

   

• 從新進行編譯之後的效果圖
  JS文件的依賴關係圖

• 經過這個效果圖能夠很明顯的看出js文件裏面包含什麼依賴，我就是經過這個線索來進行優化的。

4. 抽離共通部分

• 爲了方便我調查，我把共通的依賴部分都抽離出來了。而這個功能是webpack4自帶的，若是是以前或者更早版本的webpack，須要引入第三方組件CommonsChunkPlugin這裏不作介紹。

  module.exports = {
      optimization: {
          //打包 公共文件
   splitChunks: { cacheGroups: { vendor: { //node_modules內的依賴庫 chunks: 'all', test: /[\\/](node_modules)[\\/]/, // 文件路徑裏面帶有node_modules 都抽離出來作共通 name: 'vendor', minChunks: 1, //被不一樣entry引用次數(import),1次的話不必提取 maxInitialRequests: 5, minSize: 0, priority: 100, // enforce: true?  }, common: { // ‘src/js’ 下的js文件 chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, //也能夠值文件/[\\/]src[\\/]js[\\/].*\.js/, name: 'common', //生成文件名，依據output規則 minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, }, }, }, runtimeChunk: { name: 'manifest', }, } }

   

• 一開始我對於這個屬性的名字難以理解，以致於沒有效果,看了下面的文章後全明白了。

  • 公共代碼抽取說明

• 效果圖以下
  JS文件的依賴關係圖2

• JS文件大小
  JS文件大小2

5. 分析包大小問題

• 從上面的依賴效果圖能夠明顯的看出，有幾個包特別大，特別顯眼
  • ant-design的Icons文件
  • moment文件
  • quill文件
  • highlight.js文件

6. ant-design的Icons文件優化

• 這是ant-design的一個問題
• 而關於上面的問題，我建議大家直接看連接最下面的部分。（上面的一羣人聊了半天，不知因此然，各類連接來回跳，也沒找到結果）
• 核心的幾句話。
  JS解決方案
  TS解決方案
• 經過了本身的理解，一個要本身引入相應的Icon，另外一個是要在webpack裏面進行配置

• 增長antdIcon.ts代碼，引入相應的Icon

  // 本身項目裏面用到的Icon
  export {
      default as FileOutline, } from '@ant-design/icons/lib/outline/FileOutline'; // antd的message組建內部用到的Icon 把源代碼複製過來。 // var iconType = { // info: 'info-circle', // success: 'check-circle', // error: 'close-circle', // warning: 'exclamation-circle', // loading: 'loading' // }[args.type] // message info export { default as InfoCircleTwoTone, } from '@ant-design/icons/lib/twotone/InfoCircleTwoTone'; // message success export { default as CheckCircleTwoTone, } from '@ant-design/icons/lib/twotone/CheckCircleTwoTone'; // message error export { default as CloseCircleTwoTone, } from '@ant-design/icons/lib/twotone/CloseCircleTwoTone'; // message warning export { default as ExclamationCircleTwoTone, } from '@ant-design/icons/lib/twotone/ExclamationCircleTwoTone'; // message loading export { default as LoadingOutline, } from '@ant-design/icons/lib/outline/LoadingOutline';

   

• 修改 webpack 配置

  module.exports = {
      resolve: {
          modules: [path.resolve(__dirname, './src'), 'node_modules'], // <- 追加代碼
          extensions: ['.ts', '.js', '.vue', '.json'], // <- 追加代碼
   alias: { vue$: 'vue/dist/vue.esm.js', '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/tools/antdIcon.ts'), // <- 追加代碼  }, plugins: [ // <- 追加代碼 new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, './tsconfig.json'), }), ], },

   

• 再一次編譯,是否是發現已經看不到Icon了，原本就應該這樣，個人項目中根本沒用幾個Icon
  依賴效果圖3

• JS文件的大小,直接減小了500K左右
  JS文件大小3

7. moment文件優化

• 這是個Ant-design內部依賴的語言文件，個人程序裏面自己沒有引用，我主要用到的是裏面的中文，因此，中文之外的我所有在webpack裏面設置忽略就好了

  module.exports = {
      plugins: [
          // 只讀取（zh-cn）文件。
          new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(zh-cn)$/), ], }

   

8. quill文件優化

• 這個是我用到的富文本功能，自己對這個組件不太瞭解，但又必需要用到，也沒什麼太好優化方法，索性，把它抽離成一個單獨的共通JS文件，這樣起碼有2個組建同時調用這個富文本的狀況下，只有第一個掉用的那個須要引入JS文件，第二次的那個會直接利用瀏覽器的緩存來調用這個JS文件的，也有必定程度的優化效果。

• 因此我修改了抽離共通組件的那部分代碼

  module.exports = {
      optimization: {
          splitChunks: {
              cacheGroups: {
                  vendor: {
                      chunks: 'all', test: /[\\/](quill)[\\/]/, // <- 就是簡單修改了下匹配規則 name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100, }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, }, }, }, runtimeChunk: { name: 'manifest', }, } }

   

• 7和8修改以後的效果
  依賴關係效果圖4

• 7和8修改以後的JS文件大小
  JS文件大小4

9. highlight.js文件優化

• 這個主要是我用markdown編輯器的時候，用來給文字着色的。沒有這個，在編寫markdown的時候，內容很是的醜陋。
• 可是這個東西的語法太多了，致使這個包很是的大，我編寫的時候，只須要利用其中的幾種狀況而已，我先隨便定幾種狀況，反正是本身的項目，有不夠的之後隨時再追加（正式項目的話請作好調研）

• highlight.js官方說明

  // 按需加載的寫法
  import hljs from 'highlight.js/lib/highlight';
  import javascript from 'highlight.js/lib/languages/javascript'; hljs.registerLanguage('javascript', javascript);

   

• 改完文件之後再看依賴關係
  依賴關係效果圖5

• JS文件大小
  JS文件大小5

• 至此，我以爲以我如今的水平代碼已經沒有什麼好調整了，main文件仍是有點大，我也已經盡力了。

10. 服務開啓Gzip代碼壓縮

• 我用的是nginx服務器，它能夠開啓Gzip，代碼壓縮率很是可觀。200k文件直接被它壓縮到幾十k。

• 本來還有點小卡的網站，在啓用了Gzip以後，變得一點也不卡了。

• 修改nginx配置，這裏有個小的坑（最後還給我來一個坑），隨便找個網站複製下，大體都長下面這樣，最後要重啓nginx服務，讓它讀取最新配置nginx -s reload。若是你用的是docker請輸入docker exec -it 容器名字 service nginx reload

  gzip on;
  gzip_min_length  5k;
  gzip_buffers     4 16k; #gzip_http_version 1.0; gzip_comp_level 3; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on;

   

• 坑在哪裏？你本身看吧，說出來都是淚啊坑

• Gzip有啥缺點？ 我也不太清楚，第一應該是它不支持IE6以及IE6如下的瀏覽器。還有人說他不利於SEO，但也有人說他利於SEO，是真是假去問百度。網上大部分人覺的他的優勢大於缺點。

• 謝謝你們。