开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

带有清单文件的webpack2 CommonsChunkPlugin，如果minChunks是函数，则仅生成"names[]“数组中的最后一个文件

带有清单文件的webpack2 CommonsChunkPlugin是一个用于代码分割和模块打包的插件。它可以将多个入口文件中的公共模块提取出来，生成一个单独的文件，以减少重复加载和提高页面加载速度。

具体来说，当minChunks参数是一个函数时，它可以用来控制哪些模块应该被提取到清单文件中。在这种情况下，只有在"names[]"数组中最后一个文件中被引用的模块才会被提取到清单文件中。

这个功能在以下场景中非常有用：

多页面应用：当一个应用有多个入口文件时，可以使用该插件将公共模块提取到清单文件中，以避免重复加载。
第三方库分离：当应用中使用了大量的第三方库时，可以将这些库提取到清单文件中，以便在不同的页面中共享使用。
缓存优化：将公共模块提取到清单文件中可以使浏览器更好地缓存这些文件，从而提高页面加载速度。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云提供了一系列与云计算相关的产品和服务，包括云服务器、云数据库、云存储、人工智能等。以下是一些相关产品和其介绍链接地址：

云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库（CDB）：提供高可用、可扩展的数据库服务，支持多种数据库引擎。详情请参考：https://cloud.tencent.com/product/cdb
云存储（COS）：提供安全、可靠的对象存储服务，适用于存储和处理各种类型的数据。详情请参考：https://cloud.tencent.com/product/cos
人工智能（AI）：提供多种人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

请注意，以上链接仅供参考，具体的产品和服务选择应根据实际需求进行评估和选择。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

优化 Webpack 构建结果

项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。...areaData_min.js是项目中显示地区的一个JavaScript数据文件，体积很大，用到的页面也很多，但并不是强依赖，却被打包到了bundle里。...其他常见的问题包括vendor中打包入了过多文件，多次引入了不同版本的库文件等。 2. 模块异步化首先我们来把非强依赖的模块异步化。...Webpack 1.0中可以通过 require.ensure 来实现异步文件的剥离和加载。Webpack2则通过更标准的 import() 来实现同样的功能。...如果合并入太多业务代码，vendor的缓存复用率会大为降低，对更新频繁的项目来说对性能反而有损耗。最后的结果如下图，相比优化前已经大幅改善了。 ? 4.

5899 0

优化 Webpack 构建结果

项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。...areaData_min.js是项目中显示地区的一个JavaScript数据文件，体积很大，用到的页面也很多，但并不是强依赖，却被打包到了bundle里。...其他常见的问题包括vendor中打包入了过多文件，多次引入了不同版本的库文件等。 2. 模块异步化首先我们来把非强依赖的模块异步化。...Webpack 1.0中可以通过 require.ensure 来实现异步文件的剥离和加载。Webpack2则通过更标准的 import() 来实现同样的功能。...如果合并入太多业务代码，vendor的缓存复用率会大为降低，对更新频繁的项目来说对性能反而有损耗。最后的结果如下图，相比优化前已经大幅改善了。 ? 4.

4953 0

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

项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。...areaData_min.js是项目中显示地区的一个JavaScript数据文件，体积很大，用到的页面也很多，但并不是强依赖，却被打包到了bundle里。...其他常见的问题包括vendor中打包入了过多文件，多次引入了不同版本的库文件等。 2模块异步化首先我们来把非强依赖的模块异步化。...Webpack 1.0中可以通过 require.ensure 来实现异步文件的剥离和加载。Webpack2则通过更标准的 import() 来实现同样的功能。...如果合并入太多业务代码，vendor的缓存复用率会大为降低，对更新频繁的项目来说对性能反而有损耗。最后的结果如下图，相比优化前已经大幅改善了。

2922 0

webpack4：连奏中的进化

/dist，不再需要配置文件，实现了开箱即用的封装能力，更通俗的讲，webpack会自动查找项目中src目录下的index.js文件，然后选择的模式进行相应的打包操作，最后新建dist目录并生成一个main.js...into the new chunk，即将满足minChunks配置想所设置的条件的模块移到一个新的chunk文件中去，这个思路是基于父子关系的，也就是这个新产出的new chunk是所有chunk的父亲...CommonsChunkPlugin另外一个问题是：对异步的模块不友好。...runtimeChunkPlugin 在使用CommonsChunkPlugin的时候，我们通常会把webpack runtime的基础函数提取出来，单独作为一个chunk，毕竟code splitting...webpack4废弃了CommonsChunkPlugin，采用了runtimeChunkPlugin可以将每个entry chunk中的runtime部分的函数分离出来，只需要一个简单的配置：optimization.runtimeChunk

1.4K5 0

Webpack 持久化缓存实践

第二个 CommonsChunkPlugin 用来提取第三方代码，将它们进行抽离，判断资源是否来自 node_modules，如果是，则说明是第三方模块，那就将它们抽离。...默认情况下，模块的 id 是这个模块在模块数组中的索引。...换句话说，如果我只是修改 css 代码段，而不动 js 代码，那么最后生成出来的 css 文件名依然没有变化。...[contenthash:8].css`, }), ] } 如果你使用的是 webpack2，webpack3，那么恭喜你，这样就足够了，js 文件和 css 文件修改都不会影响到相互的 hash 值。...我认为的正确的姿势是：像 React、Vue 这样整体性偏强的库，可以生成 vendor 第三方库来去做缓存，因为你一般技术体系是固定的，一个站点里面基本上都会用到统一技术体系，所以生成 vendor

1.4K5 0

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

一般来说，在Angular中我们将是启动.bootstrap()的文件，在Vue中则是new Vue()的位置，在React中则是ReactDOM.render()或者是React.render()的启动文件...如果你看过生成的bundle.js代码就会发现，Webpack将所有的模块打包一起，每个模块添加标记id，通过这样一个id去获取所需模块的代码。...HtmlwebpackPlugin 功能有下：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个...CommonsChunkPlugin 提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。...: 'vendors.js',minChunks: function(module) {return isExternal(module);}}) 关于isExternal()函数，用了很简单的方式进行

1.5K3 0

webpack性能优化(2)：splitChunks用法详解

防止复制：使用 CommonsChunkPlugin 去重和分离 chunk。将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。...这里需要注意几点：入口文件本身算一个请求如果入口里面有动态加载得模块这个不算在内通过runtimeChunk拆分出的runtime不算在内只算js文件的请求，css不算在内如果同时又两个模块满足cacheGroup...最后，还有一个点需要注意，minChunks 不能设为 0，其值为 >= 1 的正整数，不然为报错。..., 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效. optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来...设置runtimeChunk之后，webpack就会生成一个个runtime~xxx.js的文件。然后每次更改所谓的运行时代码文件时，打包构建时app.js的hash值是不会改变的。

1.9K4 2

webpack调优总结

DllPlugin dll 是 Dynamic Link Library（动态链接库）的缩写，是 Windows 系统共享函数库的一种方式。...这时在 package.json 加上一个命令，npm run dll一下就会生成一个类似这样的文件：vendor_dll_be1f5270e490dcb25f.js { ......网上的例子一般是将 dll 的文件名直接写死的，但由于在上一步构建 dll 的时候加入了 hash，所以要通过 fs 读取真实的文件名，再注入到 html 中。...new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'], minChunks: Infinity...webpack.optimize.CommonsChunkPlugin({ names: ['manifest'], minChunks: Infinity

2202 0

webpack 打包加速实战

如果你的项目还在用 webpack2 的话，强烈建议你升级到 webpack3。webpack3 向下兼容，只不过有一些插件需要同时升级，注意看控制台给出的日志，把需要升级的一起升级了就好了。...Scope Hoisting-作用域提升 webpack 打包的时候，每个模块都被一个闭包函数包裹，过多的闭包函数降低了浏览器中 JS 执行效率，Scope Hoisting 的作用是减少闭包函数的数量...，将有关联的模块放到同一个闭包函数中。...commonChunkPlugin 抽取公共代码抽取公共代码有两个好处，一个是能减少编译代码的数量，一个是能够充分利用浏览器缓存，比如遇到项目切换的情况，使用 service-worker 中缓存共用的.../dist/vendor-manifest.json') }), 最后还需要在 html 中引入生成的 DLL，网上有一些教程是直接把 script 标签写入 html 中的，但是由于我们多个项目同时依赖同一份

5322 0

谈谈webpack2的一些事

webpack1时只能导出单份配置文件，在webpack2中可以同时打包多份配置文件，意味着可以为多个入口文件打包，在多页面打包的时候，就再也不需要为在每一个单独的页面执行打包命令了。...中，不需要默认写一个空字符串，如果没有配置这个选项，则默认的后缀名是['.js', '.json']，这样可以在需要用到import 'some.js'的时候直接写import 'some'就好。...，webpack2中则直接更换成了一个单独的属性modules，默认优先搜索node_modules(注意，这是一个相对位置) // config resolve: { // root : path.join...为了使文件更小化，webpack使用标识符而不是模块名称，在编译的时候会生成一个名字为manifest的chunk块，并且会被放入到entry中。...webpack提供了一个插件ChunkManifestWebpackPlugin,它会将manifest映射提取到一个单独的json文件中，这样在manifest块中只需要引用而不需要重新生成，所以最终的配置是这样的

1.3K5 0

webpack性能优化(2)：splitChunks用法详解

防止复制：使用 CommonsChunkPlugin 去重和分离 chunk。将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。...这里需要注意几点：入口文件本身算一个请求如果入口里面有动态加载得模块这个不算在内通过runtimeChunk拆分出的runtime不算在内只算js文件的请求，css不算在内如果同时又两个模块满足cacheGroup...最后，还有一个点需要注意，minChunks 不能设为 0，其值为 >= 1 的正整数，不然为报错。..., 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效. optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来...设置runtimeChunk之后，webpack就会生成一个个runtime~xxx.js的文件。然后每次更改所谓的运行时代码文件时，打包构建时app.js的hash值是不会改变的。

1.7K2 0

webpack基础探讨

局部垫片为开发框架而准备的, 不会污染全局变量, 会在局部的方法里面新增加变量和方法优势: 当在代码中使用它的时候, 项目中的其他函数,如果使用es6/7方法, 会将每一个引用到的方法打包到单独的文件中去的...屏蔽插件plugins, 使用polyfill, 完美运行所有新属性, 但是打包文件很大, 达到了471Kb 实际开发中如何选择如果是应用开发, 只需要配置preset, 如果要使用es6/7新语法..., 如果是1的话, 表示将所有的模块都提走, 针对pageA中, 如果只有自己引用jQuery, 那么会生成jQuery-vendor.js 的打包文件 maxAsyncRequests:...如果想将lodash和webpack运行生成时代码以及公共代码打包到一起, minChunks改成Infinity, name:vendor, 将所有生成的文件引用都放到vendor中了 // 5....联系到上一节中的css.transform.js, 但是时机是不一样的, PostCss是打包的时期, css.transform是浏览器插入到style标签中的时候 postcss的强大, 理解成为一个处理

7031 0

读书笔记之webpack实战

，已经设置好正确的导出值 3.通过单独加载包内的单独文件，从而减小打包体积 4.当第三方依赖较多时，我们可以用提取vendor的方法将这些模块打包到一个单独的bundle中，以更有效地利用客户端缓存...loader可以是链式的，并且每一个都允许拥有自己的配置项。 20.loader本质上是一个函数。...第一个loader的输入是源文件，之后所有loader的输入是上一个loader的输出，最后一个loader则直接输出给Webpack。...通过CSS Modules可以让CSS模块化，避免样式冲突 25.CommonsChunkPlugin的默认规则是只要一个模块被两个入口chunk所使用就会被提取出来； minChunks可以接受一个数字...，当设置minChunks为n时，只有该模块被n个入口同时引用才会进行提取；指定minChunks为Infinity，为了生成一个没有任何模块而仅仅包含Webpack初始化环境的文件，这个文件我们通常称为

2353 0

升级你的webpack（下）-- webpack入门教程（三）

区别： [hash]：每次webpack在编译的过程中会生成唯一的hash值，项目中任何一个文件改动后就会被重新创建，然后webpack会计算新的hash值。...简单来说，hash是跟整个项目的构建相关，每一次构建就生成一个hash值，即使文件内容没有改变。...[contenthash]：由文件内容产生的hash值，内容不同产生的contenthash值就不一样。如果项目中是把所有的内容都打包成同一个文件，那么[hash]就足够了。...目录下，这样每次更新代码时会生成新的命名文件了。...如果不希望使用默认配置，可以通过splitChunks.cacheGroups进行配置，cacheGroup中priority 为分离规则的优先级，优先级越高，则优先匹配。

3.4K60 0

小白入门级！webpack基础、分包大揭秘

作用模块化的开发方式可以提供代码复用率，方便进行代码的管理。通常来说，一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。...当运行webpack开发环境中间件时，每当检测到一个文件变化，就会创建一个新的compilation，从而生成一组新的编译资源。...（三）生成阶段输出资源(seal)：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。...CommonsChunkPlugin就类似于：创建这个chunk并且把所有与minChunks字段匹配的模块移到新的chunk中。...如果Chunk体积「大于」minSize则判断是否超过maxSize、maxAsyncSize、maxInitialSize声明的上限阈值，如果超过则尝试将该Chunk继续分割成更小的部分。

1.5K1 0

webpack2 终极优化

webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。...可以通过这以下几点做到压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader?...如果你把这些基础库和业务代码打包在一个文件里每次改动业务代码都会导致浏览器重复下载这些保护基础库的代码。.../app依赖的文件发生变化时会把./app编译成一个模块去替换老的，替换完毕后重新执行run函数渲染出最新的效果。...filename: 'index.html', // 该html文件依赖的entry，必须是一个数组。依赖的资源的注入顺序按照数组的顺序。

1.1K11 0

.vue文件结构(vue框架项目)

build文件夹里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等； build.js文件构建环境下的配置: loading动画、删除创建目标文件夹、webpack...配置静态资源路径；生成cssLoaders用于加载.vue文件中的样式；生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件 'use strict' const path...[ext]') //超过10000字节的图片，就按照制定规则设置生成的图片名称，可以看到用了7位hash码来标记，.ext文件是一种索引式文件系统 } }, {...,是webpack基本配置文件webpack.base.conf.js中的配置 */ const devWebpackConfig = merge(baseWebpackConfig, {...如果有全局host就用全局，否则就用index.js中的设置。

1.4K1 0

webpack2 终极优化

webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。...可以通过这以下几点做到压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader?...如果你把这些基础库和业务代码打包在一个文件里每次改动业务代码都会导致浏览器重复下载这些保护基础库的代码。.../app依赖的文件发生变化时会把./app编译成一个模块去替换老的，替换完毕后重新执行run函数渲染出最新的效果。...filename: 'index.html', // 该html文件依赖的entry，必须是一个数组。依赖的资源的注入顺序按照数组的顺序。

5712 0

webpack2 终极优化

webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。优化输出打包结果更小可以让网页打开速度更快以及简约宽带。...可以通过这以下几点做到压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader?...发布到npm的库大多数都包含两个目录，一个是放着cmd模块化的lib目录，一个是把所有文件合成一个文件的dist目录，多数的入口文件是指向lib里面下的。.../app依赖的文件发生变化时会把./app编译成一个模块去替换老的，替换完毕后重新执行run函数渲染出最新的效果。...filename: 'index.html', // 该html文件依赖的entry，必须是一个数组。依赖的资源的注入顺序按照数组的顺序。

5642 0

现代Web开发系列教程_03

本篇涉及了很多react的知识，如果不清楚，建议先看看react官方文档安装react及babel npm install react react-dom --save npm install babel-core...babel来编译jsx语法的js文件，需要对babel进行一些配置 .babalrc { "presets": ["react"] } 把这个小demo部署到nginx里吧 1 ln -sf demo2...CommonsChunkPlugin的工作原理相当于把指定的chunks里每个chunk引用的所有资源先抽出来，然后对这些重复资源进行统计，看每个重复资源被n个chunk引用，如果n>=minChunks...设置的值，则将该资源移至common chunk里，如果n<minChunks，则看该资源name指定的chunk引用不，如果引用就只将该资源返还给name指定的chunk，否则返还给所有引用它的chunk...因此 new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, }) var entries

7056 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭