Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge of what is the method of Vue project optimization from 2.5m to 200kb, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

You need to create a new file 'vue.config.js', (the file name is always written that way), which is in the same level directory as package.json.

BundleAnalyzer

Function: display packaged graphical information, open a html page to help you analyze which files are too large, optimize them, and comment them out before launch

Install the webpack-bundle-analyzer plug-in

Npm install webpack-bundle-analyzer-save-dev

In vue.config.js:

/ / introduce const BundleAnalyzerPlugin = require ("webpack-bundle-analyzer") .BundleAnalyzerPlugin;// to display graphical information chainWebpack: config = > {config .plugin ('webpack-bundle-analyzer') .use (BundleAnalyzerPlugin)} extract css support for demand loading

Install the mini-css-extract-plugin plug-in

Npm install mini-css-extract-plugin-D

In vue.config.js:

ChainWebpack: config = > {let miniCssExtractPlugin = new MiniCssExtractPlugin ({filename: 'assets/ [name]. [hash: 8] .css', chunkFilename: 'assets/ [name]. [hash: 8] .css'}) config.plugin ('extract-css') .use (miniCssExtractPlugin)} Image load on demand

Install the image-webpack-loader plug-in

Npm install image-webpack-loader-D

In vue.config.js:

Config.module.rule ('images') .test (/\. (png | jpe?g | gif | webp) (\?. *)? $/) .use (' image-webpack-loader') .loader ('image-webpack-loader') .options ({bypassOnDebug: true}) .end ()

Image compression can be done in batches at: https://tinypng.com/

Gzip compression code

Install the compression-webpack-plugin plug-in

Npm install compression-webpack-plugin-D

In vue.config.js:

Const CompressionWebpackPlugin = require ('compression-webpack-plugin') / / enable gzip compression config.plugins.push (new CompressionWebpackPlugin ({filename: info = > {return `${info.path} .gz ${info.query}`}, algorithm: 'gzip', threshold: 10240) / / only resources with a size greater than this value will be processed by 10240 test: new RegExp ('\\. ('+ ['js'] .join (' |) +) $'), minRatio: 0.8, / / only resources with a compression ratio less than this value will be processed deleteOriginalAssets: false / / delete the original file})) Common code extraction

In vue.config.js:

/ / enable gzip compression configureWebpack: config = > {config.plugins.push (new CompressionWebpackPlugin ({filename: info = > {return `${info.path} .gz ${info.query}`}, algorithm: 'gzip', threshold: 10240) / / only resources with a size greater than this value will be processed with 10240 test: new RegExp ('\\. ('+ ['js'] .join (' |) +) $'), minRatio: 0.8, / / only resources with a compression ratio less than this value will be processed deleteOriginalAssets: false / / delete the original file})} element-ui load on demand

Install the babel-plugin-component plug-in

Npm install babel-plugin-component-save-dev

In babel.config.js:

Module.exports = {presets: ['@ vue/app'], plugins: [["component", {libraryName: "element-ui", styleLibraryName: "theme-chalk"}]} echarts load on demand:

Install the babel-plugin-equire plug-in:

Npm install babel-plugin-equire-D

Create an echarts.js in the project:

/ / eslint-disable-next-line const echarts = equire ([/ / write down the echarts api "tooltip", "line"] you need; export default echarts

In babel.config.js:

Module.exports = {presets: ['@ vue/app'], plugins: [["component", {libraryName: "element-ui", styleLibraryName: "theme-chalk"}], "equire"]}

Specific page applications:

/ / directly reference import echarts from'@ / lib/util/echarts.js' this.myChart = echarts.init (this.$refs.chart) lodash to load on demand:

Install the lodash-webpack-plugin plug-in

Npm install lodash-webpack-plugin-save-dev

In babel.config.js:

Module.exports = {presets: ['@ vue/app'], plugins: [["component", {libraryName: "element-ui", styleLibraryName: "theme-chalk"}], "lodash", "equire"]}

In vue.config.js:

Const LodashModuleReplacementPlugin = require ("lodash-webpack-plugin"); chainWebpack: config = > {config .plugin ("loadshReplace") .use (new LodashModuleReplacementPlugin ());} prefetch and preload

Remove useless plug-ins and avoid loading redundant resources (if not, useless js files will be loaded in index.html)

ChainWebpack: config = > {/ / remove prefetch plug-ins, avoid loading redundant resources config.plugins.delete ('prefetch') / remove preload plug-ins, avoid loading redundant resources config.plugins.delete (' preload');} complete code: const MiniCssExtractPlugin = require ('mini-css-extract-plugin'); const CompressionWebpackPlugin = require (' compression-webpack-plugin'); const LodashModuleReplacementPlugin = require ("lodash-webpack-plugin") Module.exports = {productionSourceMap: false, / / close the production environment source map lintOnSave: false, publicPath: process.env.VUE_APP_PUBLIC_PATH, devServer: {host: "localhost", port: 3002, proxy: {'/ api': {target: "https://tapi.quanziapp.com/api/", ws: true, changeOrigin: true PathRewrite: {'^ / api':'}},}}, chainWebpack: config = > {/ / remove prefetch plug-in config.plugins.delete ('prefetch') / / remove the preload plug-in to avoid loading redundant resources config.plugins.delete ('preload'); config.optimization.minimize (true) Config.optimization.splitChunks ({chunks: 'all'}) config .plugin (' webpack-bundle-analyzer') .use (require ('webpack-bundle-analyzer') .BundleAnalyzerPlugin) if (process.env.NODE_ENV! = =' development') {let miniCssExtractPlugin = new MiniCssExtractPlugin ({filename: 'assets/ [name]. [hash: 8] .css' ChunkFilename: 'assets/ [name]. [hash: 8] .css'}) config.plugin ('extract-css') .use (miniCssExtractPlugin) config.plugin ("loadshReplace") .use (new LodashModuleReplacementPlugin ()) Config.module.rule ('images') .test (/\. (png | jpe?g | gif | webp) (\?. *)? $/) .use (' image-webpack-loader') .loader ('image-webpack-loader') .options ({bypassOnDebug: true}) .end () .use (' url-loader') .loader ('file) -loader') .options ({name: 'assets/ [name]. [hash: 8] .[ ext]'}) .end () config.module.rule ('svg') .test (/\. (svg) (\?. *)? $/) .use (' file-loader') .loader ('file-loader') .options ({ Name: 'assets/ [name]. [hash: 8]. [ext]'})}} ConfigureWebpack: config = > {/ / config.plugins.push (["equire"]) If (process.env.NODE_ENV! = = 'development') {config.output.filename =' assets/ [name]. [hash: 8] .js' config.output.chunkFilename = 'assets/ [name]. [hash: 8] .js'} / / Common code extraction config.optimization = {/ / split code block splitChunks: {cacheGroups: {/ / Common module is extracted from common: {chunks: 'initial' MinSize: 0, / / greater than 0 bytes minChunks: 2, / / when pulling away from the common code The minimum number of references to this code block}, / / third-party libraries extract vendor: {priority: 1, / / weight test: / node_modules/, chunks: 'initial', minSize: 0, / / greater than 0 bytes minChunks: 2, / / before splitting The minimum number of times this code block should be referenced},},}} / / enable gzip compression config.plugins.push (new CompressionWebpackPlugin ({filename: info = > {return `${info.path} .gz ${info.query}`}, algorithm: 'gzip', threshold: 10240 / / only resources with a size greater than this value will be processed with 10240 test: new RegExp ('\\. ('+ ['js'] .join (' |) +) $'), minRatio: 0.8, / / only resources with a compression ratio less than this value will be processed deleteOriginalAssets: false / / delete the original file})})} Css: {extract: true, sourceMap: false, loaderOptions: {sass: {},}, these are all the contents of the article "what is the method of optimizing Vue projects from 2.5m to 200kb?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.