webpack4单页面如何提取第三方公共库

ioriandy4
  • 37

webpack4单页面如何提取第三方公共库?例如我项目引用了jquery,lodash等第三方库,现在打包出来都在index.js里面,如何把这些库分离出来呢?

回复
阅读 3.1k
4 个回答

分开打包呢,接CDN,就如楼上所说,使用extenal;

如果是分开打包,就可以了解一下webpack的

optimization: {
        splitChunks: {
          minSize: 30000,
          cacheGroups: {
            antd: {
              test: /[\\/]node_modules[\\/]antd[\\/]/,
              name: 'vendor-antd',
              chunks: 'all'
            },
            vendor: {
              test: /[\\/]node_modules[\\/](react|react-dom|moment|react-document-title|bind-decorator)[\\/]/,
              name: 'vendor-common',
              chunks: 'all'
            },
          }
        }
      };

上面展示的是,我的项目中,对antd和react生态,分开打包的配置

webpack的dllplugin

2楼正解

// 提取公共模块,包括第三方库和自定义工具库等
    optimization: {
        // 找到chunk中共享的模块,取出来生成单独的chunk
        splitChunks: {
            chunks: "all",  // async表示抽取异步模块,all表示对所有模块生效,initial表示对同步模块生效
            cacheGroups: {
                vendors: {  // 抽离第三方插件
                    test: /[\\/]node_modules[\\/]/,     // 指定是node_modules下的第三方包
                    name: "vendors",
                    priority: -10                       // 抽取优先级
                },
                utilCommon: {   // 抽离自定义工具库
                    name: "common",
                    minSize: 0,     // 将引用模块分离成新代码文件的最小体积
                    minChunks: 2,   // 表示将引用模块如不同文件引用了多少次,才能分离生成新chunk
                    priority: -20
                }
            }
        },
        // 为 webpack 运行时代码创建单独的chunk
        runtimeChunk:{
            name:'manifest'
        }
    }
宣传栏