Vue-cli-service Build詳解

一、安裝並使用vue-cli-service build

Vue-cli-service build是一個基於webpack構建的命令行工具，用於將Vue應用程序編譯為靜態文件。使用它之前，需要安裝Vue-cli。首先，使用npm安裝Vue-cli:

npm install -g vue-cli

然後，在Vue項目所在目錄下，執行以下命令即可使用Vue-cli-service build:

vue-cli-service build

執行完這個命令後，會在項目目錄下自動生成一個dist目錄，裡面包含了編譯後的所有文件。可以把這些文件直接發布到伺服器上，以部署Vue應用程序。

二、Vue-cli-service build的配置選項

Vue-cli-service build支持一些配置選項，用於定製化編譯過程。在使用Vue-cli-service build時，可以加上一些選項，來定製化編譯過程，比如：

 vue-cli-service build --mode development

這個選項可以指定編譯模式為開發模式。除此之外，還有很多配置選項可以使用，具體如下。

1. –mode

指定編譯模式，可選值有development、production和test。

2. –dest

指定輸出目錄，默認為dist。

3. –modern

啟用現代模式構建。現代模式構建會生成兩個版本的文件，一個是ES6模塊版本，另一個是傳統版本。瀏覽器如果支持ES6模塊，則會自動載入ES6版本，否則載入傳統版本。

4. –target

指定編譯目標，可選值有’app’和’lib’。app表示編譯為應用程序，lib表示編譯為庫，供其他項目使用。

5. –formats

指定編譯出的庫的格式，可選值有’umd’、’cjs’、’amd’、’system’、’esm’和’iife’。

6. –name

指定生成的庫的名稱。

7. –no-clean

不執行清理操作。這個選項用於保留之前的生成的文件，以方便調試。

8. –watch

啟用監聽模式，即監聽文件的變化，自動重新編譯。用於開發模式下的編譯。

三、Vue-cli-service build的webpack配置

Vue-cli-service build的底層是基於webpack的，因此，Vue-cli-service build也支持一些webpack的配置，以實現更加精細化的構建。Vue-cli-service build會自動生成一個webpack配置文件，默認在項目的根目錄下生成一個vue.config.js文件。我們可以在這個文件中添加webpack的配置選項，來定製化編譯過程。

module.exports = {
  chainWebpack: config => {
    // 添加新的svg loader
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.
      use('vue-svg-loader').
        loader('vue-svg-loader').
        options({
          svgo: {
            plugins: [],
            removeDoctype: true,
            removeComments: true
          }
        });
  }
};

上面的代碼演示了添加一個新的svg loader的webpack配置，這個loader將會把SVG圖像轉換為Vue組件，以便在Vue模板中使用。

四、Vue-cli-service build的優化

Vue-cli-service build不僅支持配置選項和webpack配置，還支持一些優化選項，以提高構建的效率和文件的大小。

1. 壓縮代碼

可以使用UglifyJSPlugin來壓縮代碼：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new UglifyJSPlugin()
    ]
  }
}

2. 提取公共代碼

可以使用SplitChunksPlugin來提取公共代碼，減少文件的大小：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

3. 去除無用CSS

可以使用PurifyCSSPlugin來去除無用的CSS：

const PurifyCSSPlugin = require('purifycss-webpack');
const glob = require('glob-all');

module.exports = {
  configureWebpack: {
    plugins: [
      new PurifyCSSPlugin({
        paths: glob.sync([
          // 需要進行CSS tree shaking的文件
          path.join(__dirname, './src/*.vue')
        ])
      })
    ]
  }
}

4. 圖片壓縮

可以使用imagemin-webpack-plugin來壓縮圖片：

const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i,
        cacheFolder: path.resolve(__dirname, 'cache'),
        optimizeCache: true,
        pngquant: {
          quality: '95-100'
        },
        svgo: null,
        plugins: [
          imageminMozjpeg({
            quality: 80,
            progressive: true
          })
        ]
      })
    ]
  }
}

5. 啟用gzip壓縮

可以使用CompressionWebpackPlugin來啟用gzip壓縮：

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip'
      })
    ]
  }
}

如果需要壓縮更多的文件類型，可以增加一個數組，比如：

new CompressionWebpackPlugin({
  filename: '[path].gz',
  algorithm: 'gzip',
  test: /\.(js|css|html|svg)$/,
  threshold: 10240,
  minRatio: 0.8,
  deleteOriginalAssets: false
})

五、Vue-cli-service build的性能優化

除了上面的優化選項之外，還有一些性能優化需要注意。

1. 避免在模板中使用無法緩存的表達式

一些表達式，比如Math.random()，會導致模板的結果無法緩存，因此需要避免在模板中使用這些表達式。

2. 使用懶載入

對於一些大型的組件或者頁面，可以使用Vue的非同步組件和路由懶載入來提高載入速度，減少初始下載大小：

const Login = () => import('./views/Login.vue');
const Home = () => import('./views/Home.vue');
const User = () => import('./views/User.vue');

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Home
    },
    {
      path: '/user/:id',
      component: User
    }
  ]
});

3. 圖片處理

為了減少載入時間和提高性能，可以對圖片進行處理。比如，可以壓縮圖片、減少圖片的解析度等等。可以使用一些自動化的工具，比如ImageOptim和TinyPNG。

4. 避免使用不必要的插件和庫

有些插件和庫可能會對性能造成影響，因此在使用它們時需要謹慎。千萬不要使用不必要的插件和庫。

5. 充分利用緩存

利用瀏覽器緩存可以提高載入速度，減少帶寬消耗。因此，在開發時需要充分利用緩存，比如通過設置Expires和Cache-Control響應頭等。

六、總結

本文詳細介紹了Vue-cli-service build的使用、配置選項、webpack配置、優化選項以及性能優化。通過本文的介紹，讀者可以理解和掌握Vue-cli-service build的使用和相關知識，進一步提高Vue應用程序的構建效率和性能。