美文网首页
减少 Webpack 打包后的文件体积

减少 Webpack 打包后的文件体积

作者: Axiba | 来源:发表于2020-03-30 16:58 被阅读0次

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

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

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分组)

相关文章

  • 减少 Webpack 打包后的文件体积

    没错,又是这个项目,打包慢,包还大,真的很过分 可以参照一下一些常用方法来处理 1、CDN 2、使用splitCh...

  • vue知识点梳理

    1、webpack是静态模块打包工具可以减少文件数量,缩减代码体积,提高网页打开速度,主要作用是分析压缩和打包代码...

  • externals

    我们可以将一些JS文件存储在CDN上(减少Webpack打包出来的js体积),在index.html中通过 标签引...

  • vue项目如何减少app.js和vender.js的体积

    配置webpack中externals来减少打包后vendor.js的体积 在日常的项目开发中,我们会用到各种第三...

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • webpack4.x 总结

    webpack作用 打包(把多个文件打包成一个js文件,减少服务器的压力、减少请求) 转化 (比如 less、sa...

  • webpack externals 使用外链形式引用第三方模块

    该方法可以在打包时不将外链引用的第三方模块不打包到最终文件中,可以减少打包文件的体积,避免体积过大,影响用户体验,...

  • webpack配置常见问题

    vue项目中配置问题 通过webpack之externals配置引入外部插件,减少打包vendor体积 1.在in...

  • vue-cli打包vue、vue-router引入外部cdn

    webpack打包,app.js、vendor.js文件较大,考虑使用cdn减小打包体积 折腾了半天,发现很容易!...

  • webpack 如何压缩文件

    本节我们学习如何压缩 webpack 中的文件。在实际应用中,为了缩小打包后包的体积,我们可能需要将 CSS 和 ...

网友评论

      本文标题:减少 Webpack 打包后的文件体积

      本文链接:https://www.haomeiwen.com/subject/mkbvuhtx.html