vue项目优化方案一

·  阅读 419

这是我参与11月更文挑战的第12天,活动详情查看:2021最后一次更文挑战 前言

在框架开发中,vue/react 这两大最热门的框架都有庞大的生态和提供了对应的脚手架工具, 本文是对vue官方提供的脚手架中,作者在项目开发中总结出来的一些较好的实践

性能优化

发生了什么

在提到性能优化时,网上有n多的博客文章都在讨论这个问题。,比如最经典的从输入url到出现页面加载完毕发生了什么? 这种问题考察的范围太大,而面试官会从面试者的回答中引出更多的问题,因为这道问题往大了说会涉及 操作系统,浏览器渲染原理,计算机网络。从而涉及到每个过程发生中发生了什么?某个过程的知识点都很庞大,如何优化这个过程,但是这个过程我们开发者有很多过程是操控不了的,如浏览器需要在每一帧执行构建dom树,样式计算,生成布局树,开始分层,对图层进行绘制,栅格化操作,合成和显示这些操作,要在每一帧都完成这些操作,执行过程我们无法操控,只能针对chrom团队提出的一些优化方案或者暴露出来优化的api或者开发中的一些实践来进行优化。

webpack

在开发中,我们大都使用webpack进行打包,我们代码压缩,拆包,懒加载,tree-shaking都是webpack帮我们做的,我们只要根据业务对代码进行合理的拆包和zip压缩然后配合nginx缓存就能做到更好的优化。

这里使用compression将包达成gz格式的。然后对一些第三方较大的且不会变更的包进行拆分和合并

	chainWebpack: config => {
		
			config
			.plugin('compression')
			.use(CompressionWebpackPlugin)
			.tap(() =>
                            {
				test: /\.js$|\.html$|\.css$|\.otf/, // 匹配文件名
				threshold: 10240, // 超过10k进行压缩
                                deleteOriginalAssets: false // 是否删除源文件
			   }
			])
		if (process.env.NODE_ENV === 'production') {
			config.optimization.delete("splitChunks");
		}
	},

	// merge webpack configuration
	configureWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			// config.output.filename = 'js/[id].[contenthash].js'
			// config.output.chunkFilename = 'jsc/[id].[contenthash:8].js'
		}
			// config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
                config.optimization.splitChunks = {
                        cacheGroups: {
                                vendors: {
                                        name: "chunk-vendors",
                                        test: /[\\/]node_modules[\\/]/,                                                                                   
                                        chunks: "initial",
                                        priority: 2,
                                        reuseExistingChunk: true,
                                        enforce: true
                                },
                                elementUI: {
                                        name: "stabled-elementui",
                                        test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                                        chunks: "all",
                                        priority: 3,
                                        reuseExistingChunk: true,
                                        enforce: true
                                },
                                echarts: {
                                        name: "stabled-echarts",
                                        test: /[\\/]node_modules[\\/]echarts[\\/]/,
                                        chunks: "all",
                                        priority: 4,
                                        reuseExistingChunk: true,
                                        enforce: true
                                },
                                vue: {
                                        name: 'stabled-vue',
                                        test: /[\\/]node_modules[\\/]vue[\\/]/,
                                        chunks: "all",
                                        priority: 5,
                                        reuseExistingChunk: true,
                                        enforce: true
                                  },
                                  vuex: {
                                    name: 'stabled-vue',
                                    test: /[\\/]node_modules[\\/]vuex[\\/]/,
                                    chunks: "all",
                                    priority: 6,
                                    reuseExistingChunk: true,
                                    enforce: true
                                  },
                                  'vue-router': {
                                    name: 'stabled-vue',
                                        test: /[\\/]node_modules[\\/]vue-router[\\/]/,
                                        chunks: "all",
                                        priority: 7,
                                        reuseExistingChunk: true,
                                        enforce: true
                                    },
                                    zrender: {
                                        name: "stabled-zrender",
                                        test: /[\\/]node_modules[\\/]zrender[\\/]/,
                                        chunks: "all",
                                        priority: 8,
                                        reuseExistingChunk: true,
                                        enforce: true
                                      }
                                   }
                         }
	},
复制代码

升级项目

如果要对项目优化的话, 如果是你感觉能掌控的项目,或者小一点的项目,只要我们升级脚手架(vue-cli5应该快要release了),升级webpack,然后配套的插件进行升级,较大难以优化的包替换成社区中较小的包,甚至修改包源代码等这些尝试的话,然后根据报错信息一步步去踩坑。这是比在项目中抠抠索索这里删一行代码,那里少定义一个变量,for循环数组的length提取出来等等等这些操作要更切合实际和效果要显著的多。而且踩坑的过程也是学习的过程。

还有下文,题目也说了这是一还有二,三....。 点个赞吧

分类:
前端
标签:
分类:
前端
标签: