记一次Vue优化

最近面试别人又学了很多东西（没错，这就是小厂的面试官

来试试给我们网站优化一下。

优化目标有两个：

1. 发布后再打开，能做到大部分js依旧走缓存
2. 打开部分页面（包含excel导出、pdf预览的界面）速度变快

产生原因分析：

1. 没有提取公共chunk，导致每次打包 content-hash 都变化，每次缓存都失效。
2. 没有做异步加载。

解决方案：

1. 算是老生常谈了，我们用的vue-cli, 它内置的 webpack 4. 用的配置是 splitchunks. 加了cache-group 就可以实现了

const chunks = ['vue', 'vue-router', ....]// 大部分页面用到的包
config.optimization.splitChunks({
  chunks: 'all',
  minSize: 30000,
  maxAsyncRequests: 30,
  maxInitialRequests: 30,
  cacheGroups: {
    vue: {
      name: 'chunk-vue',
      test: (module) => {
        return chunks.some((chunk) => {
          return module.resource && module.resource.indexOf(`node_modules/${chunk}`) !== -1
        })
      },
      priority: 30,
      chunks: 'initial',
    },
    qrcode: {
      name: 'chunk-qrcode',
      priority: 20,
      test: /[\\/]node_modules[\\/]_?vue-qrcode-reader(.*)/,
    },
  }
})

修改后运行 npm run report 来看看是不是大部分公用的被提取了出来。

2. 之前router里做了动态import配置，但是那个只是页面级的，现在要做到组件级的动态加载。因为我们使用了 @vue/composition-api 所以用了 vue3 的 defineAsyncComponent 来实现。

export default defineComponent({
    components: {
        PDFFileReader: defineAsyncComponent(() => import('./components/PDFFileReader.vue')),
    }

但是后来发现还是没有生效。原来是因为把 pdf.js/excel.js 这些配置了chunk， 去掉就好了，原理大概是chunk 优先， 还要再研究一下。 还有些 vconsole 之类的插件，也改成了动态import

import('vconsole').then(module => { 
    const VConsole = module.default; 
    new VConsole()
})

对了，如果chunk太多，记得看看你们公司服务器是不是 HTTP2. 不然可能负优化了😅 最后性能大概提升了20%左右