项目优化及vue项目优化减少宽带的占用

常用优化：

1 文件压缩

项目上线记得做文件压缩。

文件压缩主要是  html  js  css 的压缩

2 静态资源的CDN引用

静态资源预先放到不占带宽的服务上，开发以及生产时，静态资源指向CDN的方法，这样访问页面时，静态资源快，而且不占带宽。

为了处理缓存的问题，后面记得加随机数；

但是上面的这种方式会造成不管图片有没有更新，每次刷新都会重新请求静态资源，因此在可行的情况下，应该是后台给到前端静态资源地址，地址里面通过hash去知道资源是否有更新，这样没更新的就使用缓存，更新的就请求新的资源；

 

vue项目的优化：

1、项目开发上线时，记得压缩js，html，css

方式：在config/index.js文件中，build的配置：

productionSourceMap: false,//false表示不打包map文件，true则会打包出map文件，上线时，这里false不需要map文件

2、静态资源引用CDN

首先有一个CDN：http://source.cn

然后配置全局变量，通常使用store.js，用一个变量定义：

store.state={  staticCDN:'https://source.cn/static'}

最后，为了方便本地开发使用到CDN上的图片，我们需要对应的先将assets/images放到https://source.cn/static上；

开发中使用：

例：

 <img :src="$store.state.staticCDN+'/assets/images/account/zhuanjinbi.png'" alt="">

3、vue文件编译的js文件指定到CDN

方法：

在config/index.js中，在build配置：

 assetsRoot: path.resolve(__dirname, '../dist'),//dist目录下输出资源文件 
assetsSubDirectory: 'static',// 静态资源存放的路径，
 //assetsPublicPath: './',
 assetsPublicPath: 'https://source.cn/',//代表打包后，index.html里面引用资源的的相对地址

然后你会发现打包出来的index.html文件引用的js及css文件都指向了https://source.cn

4、尽量减小打包后的vendor

方法：更新频率慢的包用cdn地址，不使用webpack打包一起。

首先在build/webpack.base.conf.js

配置多一个属性：

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
},

然后，index.html引入cdn上的这三个js

<script src="https://xxx/vue/2.5.2/vue.min.js"></script>
<script src="https://xxx/vueRouter/3.0.1/vue-router.min.js">