vue 打包優化

wfyweb發表於2021-06-07
Vue優化

vue 打包優化

路由按需載入

通過vue寫的單頁應用時，可能會有很多的路由引入。當打包構建的時候，javascript包會變得非常大，影響載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應的元件，這樣就更加高效了。這樣會大大提高首屏顯示的速度。

    const Home = () => import( './Home.vue')
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home }
      ]
    })

動態import()打包出來檔案的name是按照0,1,2...依次排列，如0.js、1.js等，有的時候我們希望打包出來的檔名是打包前的檔名稱。webpackChunkName 可以設定打包後的檔名稱。

const Home = () => import(/*webpackChunkName:'Home'*/ './Home.vue')

大多數情況下使用動態import()迴圈載入的，這樣就需要進入變數，使用[request]來告訴webpack，這裡的值是根據後面傳入的字串來決定。

import(/* webpackChunkName: "[request]" */ `@/components/${view}.vue`)

app.js vendor.js manifest.js

CDN

#### 為什麼使用CDN

​ 在前端工程中，將靜態檔案放到CDN上，可以直觀地減小資源包大小，同時加快首屏載入。

  1. 若不使用CDN，則所有的資源都會被打包到app.js和vendor.js中，頁面需要等到這兩個包下載完成才可以顯示。
  2. 若使用CDN，則可以利用瀏覽器多執行緒的優勢，同時下載若干靜態檔案以及剩下的app.js和vendor.js，以此達到加快載入的目的。

首先，在index.html的頭部引入cdn資源

	<script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="//unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
    <script src="//unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    <script src="//unpkg.com/echarts@4.5.0/dist/echarts.min.js"></script>

在webpack設定中新增externals（外部擴充套件)設定，如此，則import 引用的資源將不被打包，而是在執行時從外部獲取。

  configureWebpack: (config) => {
  	config.externals = {
    	'vue': 'Vue',
    	'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
        'axios: 'axios',
        'echarts': 'echarts',
   }  

},

Gzip打包壓縮

安裝外掛

	yarn add -D compression-webpack-plugin

在檔案vue.config.js裡匯入compression-webpack-plugin，並新增壓縮檔案型別

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i

在configureWebpack 裡配置如下程式碼

module.exports = {
  productionSourceMap:false,
  configureWebpack: (config) => {
    config.plugins.push(
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: productionGzipExtensions, // 匹配需要壓縮的字尾名
        threshold: 10240, //只有大小大於該值的資源會被處理單位位元組
        minRatio: 0.8,    //只有壓縮率小於這個值的資源才會被處理。預設值是 0.8。
      }),
    )
  },

Nginx配置
​```js
 server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    location /appShare {
       client_max_body_size    10m;
       root /home/test/webIndex/appShare;
       try_files $uri $uri/ /appShare/index.html;
       index index.htm index.html;
    }

}

關閉SourceMap

在專案進行打包後，會將開發中的多個檔案程式碼打包到一個檔案中，並且經過壓縮，去掉多餘的空格，且babel編譯化後，最終會用於線上環境，那麼這樣處理後的程式碼和原始碼會有很大的差別，當有bug的時候，我們只能定位到壓縮處理後的程式碼位置，無法定位到開發環境中的程式碼，對於開發不好調式，因此sourceMap出現了，它就是為了解決不好調式程式碼問題的。

優點 ： 對於開發者開說，方便除錯，可以看到原始碼
缺點： 生成的sourcemap檔案會增加打包的體積。線上使用者也能看到原始碼。

構建結果輸出分析

在 Vue 專案中用到的分析工具：webpack-bundle-analyzer 。它以圖形的方式將結果更直觀地展示出來，分析打包後的每個模組的大小。

安裝外掛

	yarn add -D webpack-bundle-analyzer

在檔案vue.config.js裡匯入compression-webpack-plugin

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    
    module.exports = {
      configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          config.plugins.push(new BundleAnalyzerPlugin())
        }
      },

執行yarn run build --report 後生成分析報告

stat (打包之前輸入的檔案大小)

parsed（打包之後輸出的檔案大小）

gzipped（開啟gzip壓縮後的檔案大小）

相關文章