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

栏目: JavaScript · 发布时间: 5年前

内容简介:本文默认各位已经使用了动态路由、按需引入、压缩js、css等常规操作…(常用的方式构建工具基本都已集成)

本文默认各位已经使用了动态路由、按需引入、压缩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了
复制代码
  • 开启后前后对比效果图
    兄dei,是时候给你的项目做一波优化了~

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包模块提前构建:ok_hand:,然后通过页面引入。这不仅能够使得 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',
                        ]
                  }  
              }]
          }
  }
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++ Primer Plus

C++ Primer Plus

Stephen Prata / 张海龙、袁国忠 / 人民邮电出版社 / 2012-6-19 / 99.00元

C++是在C语言基础上开发的一种集面向对象编程、通用编程和传统的过程化编程于一体的编程语言,是C语言的超集。本书是根据2003年的ISO/ANSI C++标准编写的。通过大量短小精悍的程序详细而全面地阐述了C++的基本概念和技术。全书分为18章和10个附录,分别介绍了C++程序的运行方式、基本数据类型、复合数据类型、循环和关系表达式、分支语句和逻辑操作符、函数重载和函数模板、内存模型和名称空间、类......一起来看看 《C++ Primer Plus》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器