Vue cli 配置CDN及Gzip

在Vue項目中，爲了提升性能縮短首頁的白屏時間（更具體的白屏時間可查看Web 性能優化-首屏和白屏時間），我們可以通過將公共庫採用CDN引入的方式以及將資源文件壓縮的方式。

關於 配置CDN及Gzip 之後可從以下3個鏈接進行體驗，在 Chrome 開發者工具 Network 中勾選 Disable Cache：

1. 未配置CDN及Gzip：https://www.fxss.work/authorityRouter
2. 配置CDN但未配置Gzip：https://www.fxss.work/authorityRouterCdn
3. 配置CDN及Gzip: https://www.fxss.work/authorityRouterGzip

不過由於 Gzip 壓縮只有2個文件，所以 2 和 3 的差異不是很明顯，不過也可以體驗我的博客： https://www.fxss.work/vue-blog/ ，已經配置CDN及Gzip。

Vue項目中CDN的配置

在 vue.config.js 配置文件的 chainWebpack 中配置 externals ，externals 包含需要採用 CDN 方式的資源。

module.exports = {
  ...
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      var externals = {
        vue: 'Vue',
        axios: 'axios',
        'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
        vuex: 'Vuex'
      }
      config.externals(externals)
      const cdn = {
        css: [
          // element-ui css
          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/theme-chalk/index.css'
        ],
        js: [
          // vue
          'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
          // vue-router
          'https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js',
          // vuex
          'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js',
          // axios
          'https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js',
          // element-ui js
          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/index.js'
        ]
      }
      // 通過 html-webpack-plugin 將 cdn 注入到 index.html 之中
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn
          return args
        })
    }
  }
  ...
}

上面採用的CDN練接是 BootCDN 的。

之後需要在 public/index.html 的 head 標籤中增加：

    <% if (process.env.NODE_ENV === 'production') { %>
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%=js%>"></script>
      <% } %>
    <% } %>

上面之所以都是用正式環境，是因爲開發環境還需要使用 Vue Devtools。

需要注意的是 本地開發環境中使用的版本與正式環境的版本需要一致 ，可以查看 package.json 和 package-lock.json 中對應的版本號。

Vue項目中Gzip的配置

Gzip的配置需要藉助 compression-webpack-plugin 。

首先安裝：

npm install compression-webpack-plugin --save-dev

然後在 vue.config.js 中做如下配置：

const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
  ...
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生產環境
      config.plugins.push(
        new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    } else {
      // 開發環境
    }
  }
  ...
}

不過要使用擴展名爲 .gz 的預壓縮文件也需要服務器端進行對應的配置，nginx 的配置可參考 nginx 配置 gzip_static 。