Vue 优化集锦

Posted 2021-03-01 whcghost

1. 在vue-router中使用import()来代替require.ensure()懒加载实现代码打包分离

const Foo = () => import(/* webpackChunkName: "group-foo" */ ‘./Foo.vue‘)
const Bar = () => import(/* webpackChunkName: "group-foo" */ ‘./Bar.vue‘)
const Baz = () => import(/* webpackChunkName: "group-foo" */ ‘./Baz.vue‘)

require.ensure() 已经时过去式，现在推荐使用import实现异步

/* webpackChunkName: "group-foo" */ 的名称一样就会把代码打到一个包里

2. nginx gzip 压缩

3. vue gzip 压缩

4. ssr 服务端渲染

5. CDN 

module.exports = {
  entry: {
    app: ‘./src/main.js‘
  },
  externals:{
    ‘vue‘: ‘Vue‘,
    ‘vue-router‘: ‘VueRouter‘,
    ‘vuex‘:‘Vuex‘
  }
}

6. webpack 打包