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()// svgconst 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 代替 轮询