兄dei，是時候給你的項目作一波優化了~

時間 2019-11-24

標籤 dei 時候項目優化简体版

原文原文鏈接

本文默認各位已經使用了動態路由、按需引入、壓縮js、css等常規操做…（經常使用的方式構建工具基本都已集成）javascript

體積篇

1. 開啓gzip壓縮（壓縮率70%）

前端配置

// vue.config.js
const CompressionWebpackPlugin=require('compression-webpack-plugin')
module.exports = {
  chainWebpack: config => {      
        if (isPord) {
          config
              .plugin('compression')
              .use(CompressionWebpackPlugin)
              .tap(args => {                  
                return [{
                      test: /\.js$|\.html$|\.css/,
                      threshold: 10240,
                      deleteOriginalAssets: false
                }]
              })
          }
        }
}
複製代碼

Nginx配置

// 找到配置文件/usr/local/nginx/conf/nginx.conf
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
//第1行：開啓Gzip
//第2行：不壓縮臨界值，大於1K的才壓縮，通常不用改
//第3行：buffer，就是，嗯，算了不解釋了，不用改
//第4行：用了反向代理的話，末端通訊是HTTP/1.0；有這句的話註釋了就好了，默認是HTTP/1.1
//第5行：壓縮級別，1-10，數字越大壓縮的越好，時間也越長，看心情隨便改吧
//第6行：進行壓縮的文件類型，缺啥補啥就好了，JavaScript有兩種寫法，最好都寫上吧，總有人抱怨js文件沒有壓縮，其實多寫一種格式就好了
//第7行：跟緩存服務有關，on的話會在Header裏增長"Vary:Accept-Encoding"，本身對照狀況看着辦吧
//第8行：IE6對Gzip不怎麼友好，不給它Gzip了
複製代碼

開啓後先後對比效果圖

2.使用cdn引入第三庫

根據Node環境自動區分加載壓縮版與完整版，好比說：chrome插件Vue Devtools 必須是完整版才能使用；開發中的錯誤提示等

// vue.config.js
const isPord = process.env.NODE_ENV === "production"
const cdn_dev = ['https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js','https://unpkg.com/vue-router@3.0.1/dist/vue-router.js','https://unpkg.com/vuex@3.0.1/dist/vuex.js','https://unpkg.com/axios/dist/axios.js',
]
const cdn_prod = ['https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js','https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js','https://unpkg.com/vuex@3.0.1/dist/vuex.min.js','https://unpkg.com/axios/dist/axios.min.js',
]
const cdn = (isPord ? cdn_prod : cdn_dev)
複製代碼

經過html-webpack-plugin插件傳遞cdn

module.exports = {
  chainWebpack: config => {      
    if (isPord) {
          config
              .plugin('html')
              .tap(args => {
                  args[0].inject = true //DLL
                  args[0].cdn = cdn                  return args
              })
          }
      }
}
複製代碼

在index.html中動態引入

<!-- 使用cdn加速引入js、當cdn加載失敗使用本地資源 -->
<% for (var i = 0; i < htmlWebpackPlugin.options.cdn.length; i++) { %>
<script src="<%= htmlWebpackPlugin.options.cdn[i] %>"></script>
<% } %>
複製代碼

萬一cdn掛了，因此咱們須要本地下載壓縮版的第三方庫，cdn加載失效時引入本地的資源

<script> var lookUp = [ { name: 'Vue', localUrl: './js/vue.min.js' }, { name: 'axios', localUrl: './js/axios.min.js' }, { name: 'VueRouter', localUrl: './js/vue-router.min.js' }, { name: 'Vuex', localUrl: './js/vuex.min.js' }, ] lookUp.forEach(function (item, index) { var name = item.name if (typeof window[name] == 'undefined') { document.write(unescape("%3Cscript src=" + item.localUrl + "%3E%3C/script%3E")); } }) </script>
複製代碼

速度篇

1.減少文件搜索範圍

設置別名（alias）在項目中可縮減引用路徑

module.exports = {
  chainWebpack: config => {
      config.resolve.alias
              .set('@',path.resolve(__dirname,'./src'))                
          }
}
複製代碼

2.使用autodll-webpack-plugin插件

其中原理是，將特定的第三方NPM包模塊提早構建👌，而後經過頁面引入。這不只可以使得 vendor 文件能夠大幅度減少，同時，也極大的提升了構件速度。

const AutoDllWebpackPlugin = require('autodll-webpack-plugin');
module.exports = {
  chainWebpack: config => {
      config.
          .plugin('autoDll')
          .use(AutoDllWebpackPlugin)
          .tap(args =>{               return [{                
                   inject: true, // 須要給html-webpack-plugin插件設inject: true,可參考體積篇cdn第二點
                  debug: true,
                  path: './dll',
                  filename: '[name].[hash].js',
                  entry: {
                      vendor: [                          // 若未使用 cdn能夠將經常使用的庫都寫進去
                          'echarts',                          // 'vue',
                          // 'vuex',
                          // 'vue-router',
                          // 'axios',
                          // '@xuexiongjie/iview',
                        ]
                  }  
              }]
          }
  }
}
複製代碼