Vue project optimization plan I

This is the 12th day of my participation in the November Gwen Challenge

In framework development, vUE/React, the two most popular frameworks, both have a huge ecology and provide corresponding scaffolding tools. This paper summarizes some good practices in the project development of scaffolding provided by VUE official

Performance optimization

What happened

When it comes to performance tuning, there are tons of blog posts on the web discussing this issue. For example, the classic from entering the URL to showing up what happens when the page loads? This kind of question is too broad, and the interviewer will elicit more questions from the candidate’s answers, because the question will cover operating systems, browser rendering principles, and computer networks at large. So what happens in each of these processes? A process of knowledge is very large, how to optimize the process, the process, however, we have a lot of developers is process control, such as browser needs in each frame build a dom tree, style, to generate the layout tree, began to stratification, to draw the layer, rasterize operation, synthetic and display of the operation, to complete these actions in every frame, We have no control over the implementation, only some optimizations that the Chrom team has come up with, or apis that are exposed to optimizations, or practices in development.

webpack

In development, we mostly use WebPack for packaging, we compress, unpack, lazy loading, tree-shaking are all done by Webpack for us, we just need to unpack and zip compress the code according to the business and then cooperate with nginx cache to achieve better optimization.

Here the package is in GZ format using Compression. Then split and merge some third party packages that are large and do not change

	chainWebpack: config= > {
		
			config
			.plugin('compression')
			.use(CompressionWebpackPlugin)
			.tap(() = >
                            {
				test: /\.js$|\.html$|\.css$|\.otf/.// Match the file name
				threshold: 10240.// Compress over 10K
                                deleteOriginalAssets: false // Whether to delete the source file}])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}}}},Copy the code

upgrade

If you want to optimize a project, if it’s a project that you feel in control of, or a smaller project, as long as we upgrade the scaffolding (VUE-CLI5 should be released soon), upgrade the Webpack, then upgrade the accompanying plug-ins, and replace the larger packages that are difficult to optimize with smaller packages in the community, Even modify the package source code, and then step by step according to the error message to step on the pit. This is much more practical and effective than digging through the project to delete a line here, define a variable less there, extract the length of the for loop array, and so on. And the process of stepping on pits is also a learning process.

And then there’s the following, and they say this is one and two and three…. . Point a praise