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上，可以直覺地減小資源包大小，同時加快首屏加載。

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

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

<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
    <script src="//unpkg.com/[email protected]/lib/index.js"></script>
    <script src="//unpkg.com/[email protected]/dist/vue-router.js"></script>
    <script src="//unpkg.com/[email protected]/dist/axios.min.js"></script>
    <script src="//unpkg.com/[email protected]/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壓縮後的檔案大小）

vue 打包優化