创新的网站建站/哪个平台推广效果最好

前言

公司的后台管理项目最近发现首访加载特别慢，好久没有注意过network加载速度情况了，于是就随手点开查看了一下，发现有个js文件竟然加载了三四秒钟的样子，这怎么行，这种首访加载速度别说客户了，自个儿都接受不了，赶紧查找哪儿出了问题，干~

方向

1. 路由懒加载
2. 插件cdn加速
3. js、css等gz压缩
4. mapjs屏蔽
5. console语句过滤
6. 冗余代码，逻辑等等

详细说明

路由懒加载
顾名思义就是按需加载的意思；
vue官方本身就提供的一种，也有webpack等等其他方式；检查了一下我的代码，已经经过了懒加载处理

// 添加菜单功能
const Test = {path: '***',name: '***',meta: {index: 3,title: '***'},component: () =>import(/* webpackChunkName: 'operation-systemmanagement-wxtypemanagementlist' */"@/pages/******")
}

插件问题
哇，这个厉害了，不看不知道，一看吓一跳；插件这个玩意儿打包的时候全在vendor里面，没办法，挨个儿找找看能否用cdn加速试试吧；
举一部分例子：

	<!-- index.html --><script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/iview/2.14.3/iview.min.js"></script>

//build/webpack.base.conf.js
externals: {'vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex','axios': 'axios','iview': 'iview'
}

js、css等gz压缩
在vue-cli脚手架的配置信息中，有对代码进行压缩的配置项，例如index.js的通用配置，productionGzip设置为true，但是首先需要对compress-webpack-plugin支持，所以需要通过 npm install --save-dev compression-webpack-plugin(如果npm install出错了，就使用cnpm install安装。可能网络比较差npm install会出现频率比较大)，gzip会对js、css文件进行压缩处理；对于图片进行压缩问题，对于png，jpg，jpeg没有压缩效果，对于svg，ico文件以及bmp文件压缩效果达到50%，在productionGzipExtensions: [‘js’, ‘css’,‘svg’]设置需要进行压缩的什么格式的文件。对项目文件进行压缩之后，需要浏览器客户端支持gzip以及后端支持gzip。

	//config/index.jsproductionGzip: true, //是否开启gz压缩productionGzipExtensions: ['js', 'css'],

在这里说一下：打包的时候gz压缩或许会出错，看下下面的代码，asset改成filename

    //build/webpack.prod.conf.js里面webpackConfig.plugins.push(new CompressionWebpackPlugin({//asset: '[path].gz[query]',//将asset改成filenamefilename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))

mapjs屏蔽
webpack打包的时候你会发现生成了一堆的map文件,这些文件其实是让你的项目运行的时候出错了能精准的告诉你错误出现的位置，但是至于生产环境…，谁家生产环境还将错误信息暴露给客户啊，脑子进水了吧，这不是瞎捣乱嘛！

//config/index.js
productionSourceMap: false,//屏蔽mapjs 就这一地儿，清净了好多好多

console语句过滤
打包的时候像这种调试用的语句，直接过滤掉就是了，估计也不会有哪个不开眼的将逻辑代码写到console里面去吧，你要真写进去，那…我特么啥都不服就服你！！！

	new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false,drop_debugger: true,drop_console: true //就是这个玩意儿，看见没，就它，省了多大事儿}},sourceMap: config.build.productionSourceMap,parallel: true}),

冗余代码，逻辑等等

1. v-if 和 v-show (看场景，自行选择)
2. 为item设置唯一key (提高渲染效率)
3. 细分vuejs组件(这个工作一般都是后期做的)
4. 减少watch的数据 (数据变化量大的时候会有卡顿现象,可以换换computed)
5. 内容类系统的图片资源按需加载
6. SSR(服务端渲染)
   服务端渲染这个暂且不提了，暂时有局限性，目前仅支持Koa、express等Nodejs的后台框架，需要webpack支持。目前自己了解的就是后端支持方面，vuejs的后端渲染支持php，其它的不大清楚。
7. keep-alive
   如果你做用一个大型web的spa的时候，你有很多router，对应的是很多个页面。在页面的快速切换中，为了保证页面加载的效率，除了缓存机制之外，vue的keep-alive组件可以帮的上忙。
   它会把组件保存在浏览器内存当中，方便你快速切换。

结果对比

这个相较之前的情况好了太多了，爽，这下就可以慢慢优化了，上边的2.22秒的是已经优化一部分之后先放上去支撑一下，这次是快的了，我记得之前没优化的时候竟然能上四五秒才加载出来的样子，刚开始头疼的要死，现在终于可以先松口气再继续优化了！

补充： 注意插件引入情况，刚才突然间想到了一个问题，第三方插件如果都用cdn在index.html内引入的话，这时候那些按需引入的插件呢？一上来就加载进来合适嘛！囧！！！得好好琢磨一下这个问题