【Vue】SPA优化

本片是个人基于vue-cli3脚手架的vue项目做的优化记录

1.cdn引入

CDN（内容分发网络），是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

静态资源托管库：https://www.bootcdn.cn/

在public/index.html中cdn引入vue、vuex、vue-router、element、axios、qs

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.9.0/qs.min.js"></script>

在vue.config.js中

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      axios: 'axios',
      qs: 'Qs'
    },
  },
}

2.路由懒加载

路由懒加载又称为延迟加载

方法1：vue异步技术

{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
}

方法2：es提出import()

  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home.vue'),
  }

方法3：webpack提供的require.ensure()

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}

3.第三方组件库按需加载

4.gzip压缩（nginx服务器可配）

5.使用Tree shaking

6.提取公共代码

7.关闭source map

8.雪碧图

 

webpack方面性能优化：

优化可以从两个方面考虑，一个是优化开发体验，一个是优化输出质量。

优化开发体验

• 缩小文件搜索范围。涉及到webpack如何处理导入文件，不再赘述，不会的可以自行搜索。由于loader对文件转换操作很耗时，应该尽量减少loader处理的文件，可以使用include命中需要处理的文件，缩小命中范围。

• 使用DllPlugin，提升构建速度

• 使用happyPack开启多线程

• 使用UglifyJs压缩代码(只支持es5)，uglifyes支持es6，两个插件不能同时开启。使用ParalellUgifyPlugin开启多个子进程压缩，既支持UglifyJs又支持uglifyes

• 使用自动刷新：监听到代码改变后，自动编译构建可运行代码并刷新页面

• 开启模块热替换:在不刷新网页的同时实现实时预览

优化输出质量减少首屏加载时间

• 区分环境

• 压缩代码

• CDN加速

• 使用Tree shaking

• 提取公共代码

• 按需加载

提升流畅度，即代码性能:

• 使用PrePack优化代码运行时的效率

• 开启Scope Hoisting，让webpack打包出来的代码更小、运行更快

loader的原理

loader能把源文件翻译成新的结果，一个文件可以链式经过多个loader编译。以处理scss文件为例:

• sass-loader把scss转成css

• css-loader找出css中的依赖，压缩资源

• style-loader把css转换成脚本加载的JavaScript代码

plugin原理

plugin用于扩展webpack功能。

• webpack启动后，在读取配置时会先执行new BasicPlugin(options)初始化一个BasicPlugin获得它的实例

• 调用BasicPlugin.apply(compiler）给插件实例传递compiler对象

• 插件实例获取compiler对象后，通过compiler.plugin(事件名，回调函数)监听webpack广播出的事例