兄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了 复制代码
- 开启后前后对比效果图
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', ] } }] } } } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Visual Studio 通过修改项目的调试配置文件做到临时调试的时候不要编译(解决大项目编译缓慢问题)
- 内网穿透访问Vue项目的时候出现Invalid Host header解决办法
- 在项目文件 / MSBuild / NuGet 包中编写扩展编译的时候,正确使用 props 文件和 targets 文件
- 是时候谈谈JavaScript面向对象了!(我们什么时候更需要它)
- LWN:写文件的时候不希望写入一半的时候掉电丢失,怎么办?
- .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++ Primer Plus
Stephen Prata / 张海龙、袁国忠 / 人民邮电出版社 / 2012-6-19 / 99.00元
C++是在C语言基础上开发的一种集面向对象编程、通用编程和传统的过程化编程于一体的编程语言,是C语言的超集。本书是根据2003年的ISO/ANSI C++标准编写的。通过大量短小精悍的程序详细而全面地阐述了C++的基本概念和技术。全书分为18章和10个附录,分别介绍了C++程序的运行方式、基本数据类型、复合数据类型、循环和关系表达式、分支语句和逻辑操作符、函数重载和函数模板、内存模型和名称空间、类......一起来看看 《C++ Primer Plus》 这本书的介绍吧!