处理nuxt打包后vendor.js文件大的问题

电玩女神 2023-02-14 01:26 26阅读 0赞

将基于nuxt的前端项目部署到服务器后，发现打开网页加载速度慢，后来经过排查发现原因是由于vendor.js的大小太庞大导致的。这篇博客记录了四种对此问题的优化。

*  首先先进行查看nuxt分析打包文件大小  
            在nuxt.config.js中配置

build:{ 
        // 开启打包分析
        analyze: true,
        assetFilter: function(assetFilename) { 
            return assetFilename.endsWith('.js');
        }
    }

使用命令npm run build

## 优化： ##

1.  加入splitChunks  
    在nuxt.config.js中添加

module.exports = { 
    	build: { 
    		optimization: { 
    			splitChunks:{ 
        			minSize:10000,
            		maxSize:250000
            	}
    		},
    	},
    }

使用splitChunks将chunks明确切分开来。

1.  加入LodashModuleReplacementPlugin  
    首先先`npm i -D lodash-webpack-plugin`。  
    在nuxt.config.js中添加

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
    module.exports = { 
    	build: { 
    		extend(config,ctx){ 
            	config.plugins.unshift(new LodashModuleReplacementPlugin)
             	config.module.rules[2].use[0].options.plugins = ['lodash']
        	},
    	},
    }

1.  加入vuetify-loader  
    在nuxt.config.js中添加

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
    module.exports = { 
    	transpile:[/^vuetify/],
        extend(config,ctx){ 
    		config.plugins.push(new VuetifyLoaderPlugin())
        },
    }

1.  CSS懒加载

> 这种方法使用后网页开始显示时是不会带入CSS的样式的，会影响显示效果。

在nuxt.config.js中添加

module.exports = { 
    	build: { 
    		extractCSS:true,
    	}
    }