splitChunks是Webpack 4引入的一个功能,用于将代码分割成更小的chunks,以提高加载效率和缓存性能。在Vue CLI 3中,splitChunks被用来自动提取和分离公共代码,如第三方库和工具函数,从而减小最终打包文件的体积。 2. 阐述splitChunks的配置选项及其作用 splitChunks配置选项非常丰富,以下是一些常用的选项及其作用: chunks: ...
公司的项目需要区分不同版本的后台管理系统,所以配置多个.env.xxx文件来打包。 一开始根据配置文件的后缀修改了相应NODE_ENV、ENV的值,但是打包后发现,production环境的打包代码是正常,其他环境是异常的。原因是除了production环境外,其他环境的webpack的splitChunks属性没生效,打包出来的代码没有分割chunk。但是vue.config....
vue-cli3 打包优化之 splitchunks Dllplugin 可以把常用库抽离出来,包括 vue,vuex之类的库。但是 ant design vue 是按需加载,且随时有可能引入新的组件,显然不适合放进 dll 中。直接和其他文件打进 vendor.js 有会很大,所以需要将其再单独抽离出来,我决定在 config.optimization.splitChunks 配置如下: const IS_PR...
注意:externals这个对象中,key可以取important vue from 'vue'中的这个vue,value可以取外部文件export的文件名 2、使用splitChunks进行代码分割 node_modules全部打包成chunk-libs并设置优先级为10 将vantUI单独拆包,设置优先级为20 将自己的comnponents打包成common设置优先级为5 module.exports = { chainWebpack(con...
主要是用了webpack4 的 splitChunks 来进行拆包的配置以及在配置中的一些踩坑。 首屏加载的优化主要在于两个方面,一个是减小包的总体积,二是由于把依赖打包进去太大而要进行拆包处理,提高首屏的加载速度。# 一、减小包体积# 主要在于压缩和去掉无用的代码 ...
利用splitChunks 单独打包第三方模块 module.exports={chainWebpack:config=>{config.optimization.splitChunks({// 代码分割chunks:'all'})}} 或者 constIS_PROD=['production','prod'].includes(process.env.NODE_ENV)module.exports={configureWebpack:config=>{if(IS_PROD){config.optimization={splitChunks:{cach...
optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, max...
{ limit: 1024 })) config.optimization.splitChunks({ chunks: 'all',// async表示抽取异步模块,all表示对所有模块生效,initial表示对同步模块生效 cacheGroups: { vendors: { test: /[\/]node_modules[\/]/,// 指定是node_modules下的第三方包 name: 'chunk-vendors', chunks: 'all', priority: -10 ...
splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 1000 * 60, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { // 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容 const packageName = module.context.match(/[\\/]node_modules[\\/]...
config.optimization.splitChunks({ chunks: 'all' }) } } 加入以上代码后,分成了2个文件,最大的只有2.7M了,这样可以分成多个进行加载,可以达到最快化,但是一定要平衡文件大小的和分割出来的文件数量的平衡, 数量多了, 请求也会变慢的, 影响性能.可以根据项目的进行设置,具体可参考官方文档的详细说明。