Vue 优化方案

1.开启 Gzip

module.exports = {
  ...
  configureWebpack: (config) => {
  const configNew = {}
  if (process.env.NODE_ENV === 'production') {
    configNew.externals = externals
    configNew.plugins = [
      // gzip CompressionWebpackPlugin(资源压缩插件)
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240, // 对只有大小大于该值的资源会被进行压缩
        minRatio: 0.8, // 压缩率小于0.8才会压缩
        deleteOriginalAssets: false
      })
    ]
  }
  return configNew
  },
}

2.include 和 exclude 指定loader 的作用目录

const { chain, set, each } = require('lodash')
// svg
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule.include
  // 作用 icons 目录下的文件
  .add(resolve('src/assets/svg-icons/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'd2-[name]'
  })
  .end()

3.第三方模块按需导入

不要所有组件都挂到全局；

4.图片懒加载 路由懒加载 长列表动态加载

element-ui 有现成的懒加载组件，配置 lazy 属性即可

<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>

路由懒加载

// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

5.使用 keep-alive 缓存组件

6.用 websocket 代替 轮询