webpackCommonChunk最佳配置

stefan 发布于2019-08-20 14:14 / 2012人阅读

摘要：中配置的顺序有什么关系，每一个公用模块的抽取逻辑是什么这个没有找到官方的解释，通过实践，我认为应该是倒序考虑的，首先是启动脚本放在数组的最后一个文件中，例如中。例如中的和共同依赖，则中也抽取。包含页面额外的配置信息

webpack.optimize.CommonsChunkPlugin插件用于抽取模块中的复用部分，以减少打包的代码量，我们还需要考虑到缓存的优化

首先是文件名包含文件的hash值，只有在文件有变动时hash值才会变

其次我们想要将引用的js资源进行几个文件的拆分，

第一个文件是最不经常变动的第三方的库文件，

第二个文件是业务的公用组件

第三个文件是每一个页面的js代码

我们的最佳配置如下：

entry: {
        vender:["./src2/Vue.js","./src2/vender.js"],  //指明vender的库
        common: ["./src2/component1.js","./src2/component2.js"],
        global:["./src2/global.js"], //需要全局进行配置的代码
        page1: ["./src2/page1.js"],
        page2: ["./src2/page2.js"]
    },
plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ["common","vender","boot"], 
            filename: "[name].[chunkhash].js",
            minChunks: 2
        })
]

minChunks是配置模块复用多少次以上进行抽取。

chunkhash 是这个chunk的hash，而hash是对所有打包的js整体生成的hash，所以为了对缓存的优化，我们采用chunkhash。

CommonsChunkPlugin中配置的name和entry中配置的入口之间有什么关系？

如果CommonsChunkPlugin 中配置的name在entry中存在，那么这个抽取的模块首先是包含enry中指定的js文件，然后再考虑包含抽取其他entry中的公用部分。

为什么要在common中配置boot？

因为配置CommonsChunkPlugin插件以后，就需要在window上挂载window["webpackJsonp"]方法，这个方法中有所有chunk的chunkhash，所以只要有chunk变化，那么这个脚本就变化，所以应该把这个启动脚本多带带抽成一个文件，否则就会影响其他不变的文件也改变hash值。

CommonsChunkPlugin中配置的name顺序有什么关系，每一个公用模块的抽取逻辑是什么？

这个没有找到官方的解释，通过实践，我认为应该是倒序考虑的，首先是启动脚本放在数组的最后一个文件中，例如boot中。
每一个模块的逻辑如下：

首先看自己有没有对应的entry，如果有则抽取entry对应的模块，并递归抽取模块中公用的模块。例如common中的component1.js和component2.js共同依赖jquery，则common中也抽取jquery。

其次看数组中是否还有上一个元素，如果没有则将所有entry中剩余没有抽取的公用模块也都抽取出来，如果有则交给上一个元素，自己也就执行完了。例如vender先将Vue.js和vender.js抽取出来，然后发现还有common模块，所以自己就执行完了，common先将component1.js和component2.js抽取出来以后，发现上面没有文件了，所以就把entry中剩余没有抽取的公共模块也抽取出来了，比如page1.js和page2.js公用的componet4.js。

这样打包以后我们需要保证页面中文件引用的顺序，因为他们之间有了依赖关系，例如上面的配置页面的引用顺序应该是
1 boot.js
2 vender.js
3 common.js
然后是每一个页面的js page1.js 或者page2.js

如何保证页面中js文件的引用顺序?

HtmlwebpackPlugin插件提供了 chunksSortMode方法，可以对页面中引用的chunk进行排序，我们先定义chunk的顺序数组，然后类似于数组的sort，用小的减去大的返回正序。

var chunksort = ["boot","vender","common","global"];
new HtmlwebpackPlugin({
    chunks: ["boot","vender","common","global",page.outputPath],
    title: page.title,
    // extra: extra, //包含页面额外的配置信息
    template: "src/index.html",
    filename: page.outputPath + ".html",
    chunksSortMode: function (a, b) {
        var aIndex =chunksort.indexOf(a.names[0]);
        var bIndex =chunksort.indexOf(b.names[0]);
        aIndex = aIndex < 0 ? chunksort.length + 1 : aIndex;
        bIndex = bIndex < 0 ? chunksort.length + 1 : bIndex;
        return aIndex - bIndex;
    }
})

服务器托管海外云主机最佳配置方法服务器最佳配置云服务器的最佳配置 webpackCommonChunk

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81475.html

企业级容器安全最佳实践

由于容器虚拟化技术可以充分利用硬件资源，对于开发团队就像梦想照进了现实。尽管容器化没有推翻虚拟机在企业应用开发和部署上的地位，但是Docker等工具在实现开发、测试和部署大规模现代软件的速度和敏捷性方面大展身手。Docker容器具有诸多优点：无需复杂的hypervisor、可移植性、资源隔离性、轻量级、开放标准、完美适应微服务架构。众多的应用通过容器隔离起来，相互独立地运行在同一台宿主机上，哪家公...

AJie 2019-06-28 15:02 评论0 收藏0
【Rainbond最佳实践】Spring Boot框架配置MySQL

摘要：最佳实践框架配置开源软件介绍是国内首个开源的生产级无服务器。详细介绍项目地址框架简化了新应用的初始搭建以及开发过程，云帮支持平台部署类应用。配置数据库云帮提供的相关配置目录结构如下，配置文件内容仅供参考。【Rainbond最佳实践】Spring Boot框架配置MySQL Rainbond开源软件介绍： Rainbond是国内首个开源的生产级无服务器PaaS。深度整合基于Kuber...

xingqiba 2019-08-15 13:37 评论0 收藏0
AndroidStudio NDK开发最佳入门实践

摘要：开发最佳入门实践网上一些介绍入门的教程，感觉都不是很完整和全面，也没有告诉初学的同学们一些需要注意的地方。本文所介绍的是在上搭建最佳的开发环境，给使用的开发人员最大的方便。开发最佳入门实践最后在程序中添加上加载库文件的代码。 AndroidStudio NDK开发最佳入门实践网上一些介绍AndroidStudio NDK入门的教程，感觉都不是很完整和全面，也没有告诉初学Androi...

macg0406 2019-08-14 15:43 评论0 收藏0