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

将基于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明确切分开来。

2. 加入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']
    	},
	},
}

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

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

4. CSS懒加载

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

在nuxt.config.js中添加

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