兄dei，是时候给你的项目作一波优化了~

本文默认各位已经使用了动态路由、按需引入、压缩js、css等常规操做…（经常使用的方式构建工具基本都已集成）

体积篇

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',
                        ]
                  }  
              }]
          }
  }
}
复制代码

3.用Happypack来加速代码构建

• Happypack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建；配置也很easy，看官网吧~happypack

结语：今天先到这~~有兴趣的能够关注一下我的订阅号~会持续更新