Vue 优化方案

1.开启 Gzip

configureWebpack: (config) => {
const configNew = {}
if (process.env.NODE_ENV === 'production') {
  configNew.externals = externals
  configNew.plugins = [
    // gzip
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: false
    })
  ]
}
return configNew
},

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

config.module
  .rule('md')
  .test(/\.md$/)
  .use('text-loader')
  .loader('text-loader')
  .end()
// svg
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule.include
  .add(resolve('src/assets/svg-icons/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'd2-[name]'
  })
  .end()

3.第三方模块按需导入

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

5.使用 keep-alive 缓存组件

6.用 websocket 代替 轮询