vue-cli3項目打包優化

原始包大小

如下主要操做都在文件 vue.config.js 下進行，如沒有此文件，就在項目根目錄下新建。

1.去掉 .map 文件

.map 文件的做用：項目打包後，代碼都是通過壓縮加密的，若是運行時報錯，輸出的錯誤信息沒法準確得知是哪裏的代碼報錯。
有了 .map 就能夠像未加密的代碼同樣，準確的輸出是哪一行哪一列有錯。

操做：

module.exports = {
  // ...
  productionSourceMap: false,
}

包大小：

2.圖片壓縮

此操做會壓縮圖片質量，選擇使用

操做：

npm install image-webpack-loader --save-dev

module.exports = {
  // ...
  chainWebpack: config => {
    // ...
    config.module
      .rule('images')
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  },
}

包大小：

3.去除console

代碼中 console.log 越多，效果越明顯，可選擇使用。

操做：

npm install uglifyjs-webpack-plugin --save-dev

module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config
        .plugin('uglifyjs-plugin')
        .use('uglifyjs-webpack-plugin', [{
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        }])
        .end()
    }
  }
}

包大小：

4.CDN加速

維護上不受控制，因此只把那些不可能改動的代碼或者庫分離出來，經過CDN加速加載。

爲了不使用CDN遇到坑，建議使用可靠的CDN。

此項選擇使用。不建議使用。

操做：

module.exports = {
  // ...
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 分離不經常使用資源庫
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter'
      }
    }
  }
}

<!-- CDN示例 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

包大小：

5.開啓Gzip壓縮

gizp壓縮是一種http請求優化方式，經過減小文件體積來提升加載速度，能夠減少60%以上的體積。

注意：這個須要服務器配合開啓Gzip，也可打包時不配置，直接在服務器端進行Gzip壓縮。

操做：

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

module.exports = {
  // ...
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('gzip-plugin')
        .use('compression-webpack-plugin', [{
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.html$|\.json$|\.css$|\.ttf$/,
          threshold: 0, // 只有大小大於該值的資源會被處理
          minRatio:0.8, // 只有壓縮率小於這個值的資源纔會被處理
          deleteOriginalAssets: true // 刪除原文件
        }])
        .end()
    }
  }
}

包大小：