减少 Webpack 打包后的文件体积

2020-03-30  本文已影响0人  Axiba

没错,又是这个项目,打包慢,包还大,真的很过分

可以参照一下一些常用方法来处理

1、CDN

2、使用splitChunks进行代码分割

configureWebpack: config => {

    if (process.env.NODE_ENV === 'production') {
      config.optimization = {
        splitChunks: { 
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 300000, // 依赖包超过300000bit将被单独打包
          automaticNameDelimiter: '-',
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                return `chunk.${packageName.replace('@', '')}`;
              },
              priority: 10
            }
          }
        }
      }
    }
  }

3、路由懒加载(动态加载,根据chunkname分组)

上一篇 下一篇

猜你喜欢

热点阅读