vue.js混合手机开发中优化文件大小和加载速度

• 1.路由懒加载（这个在前面的博客中写过，不再赘述）

    当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
  

• 2.通过CDN方式引入公共的js文件
  虽然vue项目中可以通过npm的方式安装一些组件库，这样的确很方便，但是对于公共的，我们还是使用CDN的方式引入更好，既减少了文件的大小，又使加载的速度更快。下面看一下对比：

通过查看package.json，找到对应的配置文件

在配置文件中找到html插件模板路径

在index.html中通过CDN方式引入公共的js文件

公共js文件（注意图片懒加载不要使用CDN方式引入，这里我注释了）：

<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--<script src=" https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>--><!--这样引入不能优化-->
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>

在webpack.base.conf.js中添加一个externals块

补充：上面的步骤就可以实现优化了。但是特别需要注意的是echarts这个组件，不要使用npm的方式引入，亲测发现这种方式会生成一个2.8M左右的文件，加载时间也112ms，当然并没有进行大量测试进行对比，但是也能反映一些问题；还有就是图片了懒加载是还是使用npm的方式引入比较好。下面是测试对比图

部分优化（vue、vue-router使用CDN引入）：

优化后：

• 3.图片懒加载（前面的博客有，不再赘述）