vue首次打开加速优化

1.路由懒加载

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

2.组件异步加载

  components: {

        'my-component':()=>import('./my-async-component')

  }

3.图片懒加载

使用外部插件

4.外部引用的插件，不放到最终 打包的文件中

//webpack配置
module.exports = {
configureWebpack: config => {
    config.entry.vendorModules = ['axios']
    config.entry.vendorLocal = [
      '@/assets/css/common.scss'
    ]
    config.externals = {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter'
    }
  }
  }

5.使用cdn

//在项目的index.html页面中

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.9.1/lib/index.js"></script>

6.取消.map的加载，这个在开发的时候，方便调试的。

 //在webpack配置中
 productionSourceMap: false,

7.开启gzip加速

如果你的静态资源服务器使用的是nginx

//在nginx 的配置文件中加上
     gzip on;
	 gzip_min_length 1k;
	 gzip_comp_level 5;
	 gzip_buffers 4 16k;
	 gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/x

8.使用SSR

还未实践，后面补上。
欢迎关注我的微信公众号
搜索：前端优学。
or扫码：

获取更多更好更有深度的前端学习好文。