首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack CommonsChunkPlugin

是一个用于代码分割和模块化的插件,它可以将公共的模块提取出来,以减少打包后的文件大小,提高应用的加载速度。

该插件的主要作用是将多个入口文件中的公共模块提取出来,生成一个单独的文件,这样就可以在多个页面之间共享这些公共模块,避免重复加载和浪费资源。

使用Webpack CommonsChunkPlugin可以带来以下优势:

  1. 减少文件大小:将公共模块提取出来,避免重复打包,减小文件体积,提高加载速度。
  2. 提高缓存效果:将公共模块提取为单独的文件,可以利用浏览器缓存机制,提高页面的加载速度。
  3. 模块化管理:通过将公共模块提取出来,可以更好地管理和维护代码,提高代码的可维护性和可复用性。

Webpack CommonsChunkPlugin适用于以下场景:

  1. 多页面应用:当一个应用有多个页面时,可以将公共模块提取出来,避免重复加载,提高页面的加载速度。
  2. 第三方库提取:当应用中使用了一些第三方库时,可以将这些库提取出来,单独打包,以便利用浏览器缓存机制,提高加载速度。
  3. 异步加载模块:当应用使用了动态加载模块的方式时,可以将公共模块提取出来,避免重复加载,提高加载速度。

腾讯云相关产品中,可以使用Webpack CommonsChunkPlugin的是腾讯云的云开发(Tencent Cloud Base)产品。云开发是一款面向开发者的云原生全栈化开发平台,提供了丰富的工具和服务,包括云函数、数据库、存储、托管等,可以帮助开发者快速构建和部署应用。

更多关于腾讯云云开发的信息,可以参考腾讯云官方文档: https://cloud.tencent.com/product/tcb

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

webpack3 升级到 webpack4 小记

升级过程遇到的问题以及解决 问题 一 Error: webpack.optimize.CommonsChunkPlugin has been removed, please useconfig.optimization.splitChunks...解决方法: 在 webpack4 中不再支持 CommonsChunkPlugin,而是使用 splitChunks 替代,那么这两者有什么区别?...这里纸上谈兵一下 根据我查到的资料显示, CommonsChunkPlugin 存在以下的问题: CommonsChunkPlugin 会提取一些我们不需要的代码 它在异步模块上效率低下 很难使用,配置也很难理解...相比, splitChunks 具有以下特点: 它不会打包不需要的模块 对异步模块有效(默认情况下是打开的) 更加容易使用和更加自动化 我们平时配置 CommonsChunkPlugin 如下: new...webpack.optimize.CommonsChunkPlugin({ name: 'vendor', // 引入node_modules的依賴全抽出來 minChunks:

1K20
  • 升级你的webpack(下)-- webpack入门教程(三)

    参数切换开发模式还是生产模式 (3) 移除了CommonsChunkPlugin,改用了optimization属性进行更加灵活的配置 (4) 用新的CSS文件提取插件mini-css-extract-plugin...) 1.使用optimization,替代了CommonsChunkPlugin 1.1 持久化缓存 webpack需要使用hash来做静态资源的更新,文件名的hash值目前有三种计算hash的方式:[...在webpack4之前,可以使用webpack 内置插件:CommonsChunkPlugin。...从webpack4开始,optimization 替代了CommonsChunkPlugin插件,改用optimization属性进行更加灵活的配置。...需要通过配置两次new webpack.optimize.CommonsChunkPlugin来分别获取vendor和manifest的通用chunk方式已经做了整合, 直接在optimization中配置

    3.4K600

    鹅厂原创 | 优化 Webpack 构建结果

    项目的是传统的非SPA页面,我们使用了CommonsChunkPlugin来提取公共模块,保证各页面之间部分公共库可以复用缓存,同时使用UglifyJS等来保证输出文件体积的减小。...new webpack.optimize.CommonsChunkPlugin({      name: 'vendor',      minChunks: 5,    })  ], } 但这么做粒度还太粗...庆幸的是Webpack生态圈是如此的丰富,有不少好工具可以利用。 1分析打包结果 webpack-bundle-analyzer是一个非常好用的Webpack包分析工具。...3调整CommonsChunkPlugin配置 可以发现部分可以公用的文件并没有合到vendor里来。简单调整一下配置: {  // ...  plugins: [    // ...    ...new webpack.optimize.CommonsChunkPlugin({      name: 'vendor',      minChunks: 4,    })  ], } 值得注意的是

    28820

    webpack 为什么这么难用?2

    换句话说,如果你想给 webpack 写一个广为人知的插件,你就必须深入了解 webpack 的全部,这一点我不反对,毕竟 webpack 开发者和 webpack 使用者在能力的要求上有高低之分。...二、过重的插件体系 插件体系是 webpack 的核心,事实上,webpack 的大部分功能都是通过内部插件或者第三方插件来完成的。可以说,webpack 的生态就是建立在众多插件之上的。...7 个 webpack 内置插件: HashedModuleIdsPlugin ModuleConcatenationPlugin CommonsChunkPlugin DefinePlugin HotModuleReplacementPlugin...比如下面是常常用于提取公共模块的 CommonsChunkPlugin 的配置: new webpack.optimize.CommonsChunkPlugin({ name: 'app',...然后你就去看了 CommonsChunkPlugin 的文档,十五分钟艰难的阅读之后,你会发现这四项配置都不简单,每一项的更改会给构建带来很大的影响。

    67430

    webpack 4 升级指北

    2018年2月25日,刚过完年webpack就给了一个加班红包。webpack4经过1个月的缓冲期,终于发布了正式版,那么抛给广大开发者的问题又来了,我是不是要升级了呢?...安装 首先你要重新安装以下的依赖包: webpack4 webpack-cli(用来启动webpack) html-webpack-plugin还没有更新,会出现 compilation.templatesPluginisnotafunction...会出现提醒,所以还是加上吧 CommonsChunkPlugin 相信大家如果听说过webpack4的更新,最大的感触应该就是去除了CommonsChunkPlugin,毕竟官方 change log写的篇幅最多的就是这个...CommonsChunkPlugin删除之后,改成使用 optimization.splitChunks进行模块划分,详细文档:(https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.../webpack/releases),希望官方文档赶紧出来吧。

    1.4K70

    正确的Webpack配置姿势,快速启动各式框架!

    CommonsChunkPlugin 提取代码中的公共模块,然后将公共模块打包到一个独立的文件中,以便在其他的入口和模块中使用。...像之前有个项目有远程服务器调试代码的需求[捂脸],这时候我们需要把依赖单独抽离出来(不然文件太大了): 1234567 new CommonsChunkPlugin({name: 'vendors',filename...css打包合并: 123 new ExtractTextPlugin('style.css', {allChunks: true // 提取所有的chunk(默认只提取initial chunk,而上面CommonsChunkPlugin...('webpack');var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');var ExtractTextPlugin....js$/,loader: 'babel-loader',exclude: /node_modules/}]},plugins: [// 使用CommonChunksLoader来提取公共模块new CommonsChunkPlugin

    1.5K30

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券