2023年6月21日发(作者：)

vue-cli4解决项⽬⾸次加载慢——⼿抄之前做了⼀个vue-cli2的vue2项⽬，⼀切都OK，唯独部署后，⾸次加载特别慢。查看了⾕歌Network，发现有多个js和css⽂件特别⼤，⼤概区间在2Mb~8Mb之间。加载时间是2s到9s。针对这个问题，深⼊探索了很多博客。因为⽹络上的相关⽂档，相关的内容⽐较混乱，⽐如，脚⼿架的版本不对应导致的相关配置⽆法使⽤，我在这⾥只讲解cli4的配置。解决⽅向，主要如下。配置（重要）打包后⽂件⼤，需要查看⽂件，所有引⼊的包。1 UI框架：ElementUI，IView，Ant等，⼀定按需引⼊。2 ⾮全局的，引⼊到vue⽂件中，不要做全局。3 低效的，去除。配置const IS_PROD = ["production", "prod"].includes(_ENV);s = { productionSourceMap: !IS_PROD, // ⽣产环境的 source map}打包时配置productionSourceMap：false。剔除项⽬⽂件中map⽂件-router 路由懒加载{ path:'/singleTransverseBenchmark', component: r => ([], () => r(require('@views/benchmarkingSys/singleTransverseBenchmark')), 'lanRouter1')},根据项⽬模块进⾏设置，lanRouter1名称⼀样的会被打包进⼊⼀个⽂件，该vue关联的js和css都会按照这样的机制运⾏。3.使⽤CDN减⼩代码体积⽹络上有很多相关的资料。我的项⽬没有更改这块，因此如果⼩伙伴们有需要，可以⾃⾏搜索配置。4.测试的插件剔除测试的插件如果⽆⽤，⼀定要剔除，不要留在项⽬中。5.去掉 i uglifyjs-webpack-plugin -Dconst UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 s = {configureWebpack: config => { if (IS_PROD) { // 去掉 const plugins1 = []; ( new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, drop_debugger: false, pure_funcs: [""] //移除console } }, sourceMap: false, parallel: true }) ); s = [...s, ...plugins1]; } },}6.压缩图⽚npm i -D s = { chainWebpack: config => { // 压缩图⽚ if (IS_PROD) { .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false } // webp: { quality: 75 } }); } },}7.配置gzip，升级Zopfli（效率更⾼）gzip：npm i -D compression-webpack-pluginconst CompressionWebpackPlugin = require("compression-webpack-plugin");const IS_PROD = ["production", "prod"].includes(_ENV);const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;s = { configureWebpack: config => { const plugins = []; if (IS_PROD) { ( new CompressionWebpackPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: productionGzipExtensions, threshold: 10240, minRatio: 0.8 }) ); } s = [...s, ...plugins]; }};Zopfli：npm i -D @gfx/zopfli brotli-webpack-pluginconst CompressionWebpackPlugin = require("compression-webpack-plugin");const zopfli = require("@gfx/zopfli");const BrotliPlugin = require("brotli-webpack-plugin");const IS_PROD = ["production", "prod"].includes(_ENV);const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;s = { configureWebpack: config => { const plugins = []; if (IS_PROD) { ( new CompressionWebpackPlugin({ algorithm(input, compressionOptions, callback) { return (input, compressionOptions, callback); }, compressionOptions: { numiterations: 15 }, minRatio: 0.99, test: productionGzipExtensions }) ); ( new BrotliPlugin({ test: productionGzipExtensions, minRatio: 0.99 }) ); } s = [...s, ...plugins]; }};配置tp { ........ # GZip gzip on; gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; server { ........配置过程中，遇到的问题，具体已经记不得问题详情了，但是基本上有⼀个特点，都很奇特，解决办法如下，（以下⽅法，在你最没办法的时候可以尝试使⽤）1.删掉所有node_modules，重新npm 安装插件总是失败，可以尝试cnpm3.有⼀些插件需要匹配的基础插件的版本才能够正常运⾏。如compression-webpack-plugin需要webpack4+版，但是cli4内置的webpack版本似乎不够（也可能是我升级cli的后遗症，不确定原因），于是需要安装webpack，这时候会发现webpack和webpack-cli需要同时安装，但是安装后，⼜发现报错，研究好久，发现webpack版本太⾼，我安装的是5+，需要降版本。然后⼜发现总有⼀个奇怪的错，原来是compression-webpack-plugin版本⾼了，降版本最终的// t path = require('path');const CompressionWebpackPlugin = require("compression-webpack-plugin");const zopfli = require("@gfx/zopfli");const BrotliPlugin = require("brotli-webpack-plugin");const IS_PROD = ["production", "prod"].includes(_ENV);const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;const resolve = (dir) => (__dirname, dir);const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 // const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// const MiniCssExtractPlugin = require('mini-css-extract-plugin');s = { publicPath: "./", // 默认'/'，部署应⽤包时的基本 URL indexPath: '', // 相对于打包路径的路径 outputDir: 'dist', // 'dist', ⽣产环境构建⽂件的⽬录 assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)⽬录 lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 runtimeCompiler: true, // 是否使⽤包含运⾏时编译器的 Vue 构建版本 productionSourceMap: !IS_PROD, // ⽣产环境的 source map devServer: { open: true, // 是否打开浏览器 }, chainWebpack: config => { ks(true); // 修复热更新失效 // 添加别名 .set('@', resolve('src')) .set('@api', resolve('src/api')) .set('@tools', resolve('src/tools')) .set('@assets', resolve('src/assets')) .set('@components', resolve('src/components')) .set('@views', resolve('src/views')) .set('@router', resolve('src/router')) .set('@store', resolve('src/store')) .set('@jsonData', resolve('src/jsonData')); // 压缩图⽚ if (IS_PROD) { .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false } // webp: { quality: 75 } }); } // 展⽰打包图形化信息，会打开⼀个html页⾯，帮助⾃⼰分析哪些⽂件过⼤，可针对其进⾏优化，上线前 注释掉 // config // .plugin('webpack-bundle-analyzer') // .use(BundleAnalyzerPlugin); // 抽离 css ⽀持按需加载 - 暂⽆看到效果 // ('mini-css-extract-plugin') // .use(require('mini-css-extract-plugin'), [{ // filename: 'static/css/[name].[contenthash].css', // chunkFilename: 'static/css/[id].[contenthash].css' // }]).end(); }, // 全局样式配置 css: { loaderOptions: { sass: { prependData: `@import "./src/assets/css/default";`, }, }, }, configureWebpack: config => { if (IS_PROD) { // 去掉 const plugins1 = []; ( new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, drop_debugger: false, pure_funcs: [""] //移除console } }, sourceMap: false, parallel: true }) ); // Zopfli const plugins2 = []; if (IS_PROD) { ( new CompressionWebpackPlugin({ algorithm(input, compressionOptions, callback) { return (input, compressionOptions, callback); }, compressionOptions: { numiterations: 15 }, minRatio: 0.99, test: productionGzipExtensions }) ); ( new BrotliPlugin({ test: productionGzipExtensions, minRatio: 0.99 }) ); } s = [...s, ...plugins1, ...plugins2]; } }, }, //

pages: { index: { // page 的⼊⼝ entry: 'src/', // 模板来源 template: 'public/', // 在 dist/ 的输出 filename: '', // 当使⽤ title 选项时， // template 中的 title 标签需要是 <%= %> title: 'vue-cli4标准框架模版', // 在这个页⾯中包含的块，默认情况下会包含 // 提取出来的通⽤ chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, },}:(⾃⾏进⼊对照版本){ "name": "cli4-base", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve && webpack-dev-server --open", "dev": "vue-cli-service build --mode development", "test": "vue-cli-service build --mode test", "build": "vue-cli-service build", "webpack": "webpack --version" }, "dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "crypto-js": "^4.0.0", "echarts": "^5.1.0", "element-ui": "^2.15.1", "vue": "^2.6.11", "vue-json-excel": "^0.3.0", "vue-router": "^3.2.0", "vuescroll": "^4.17.3", "vuex": "^3.4.0" }, "devDependencies": { "@gfx/zopfli": "^1.0.15", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-plugin-component": "^1.1.1", "brotli-webpack-plugin": "^1.1.0", "compression-webpack-plugin": "^3.1.0", "image-webpack-loader": "^7.0.1", "sass": "^1.26.5", "sass-loader": "^8.0.2", "uglifyjs-webpack-plugin": "^2.2.0", "vue-template-compiler": "^2.6.11", "webpack": "^4.44.2", "webpack-cli": "^4.7.0", "webpack-dev-server": "^3.11.2" }}持续跟新，把学到的新东西，亲⾃测试后补充上来。转可以，请注明出处。

2023年6月21日发(作者：)

vue-cli4解决项⽬⾸次加载慢——⼿抄之前做了⼀个vue-cli2的vue2项⽬，⼀切都OK，唯独部署后，⾸次加载特别慢。查看了⾕歌Network，发现有多个js和css⽂件特别⼤，⼤概区间在2Mb~8Mb之间。加载时间是2s到9s。针对这个问题，深⼊探索了很多博客。因为⽹络上的相关⽂档，相关的内容⽐较混乱，⽐如，脚⼿架的版本不对应导致的相关配置⽆法使⽤，我在这⾥只讲解cli4的配置。解决⽅向，主要如下。配置（重要）打包后⽂件⼤，需要查看⽂件，所有引⼊的包。1 UI框架：ElementUI，IView，Ant等，⼀定按需引⼊。2 ⾮全局的，引⼊到vue⽂件中，不要做全局。3 低效的，去除。配置const IS_PROD = ["production", "prod"].includes(_ENV);s = { productionSourceMap: !IS_PROD, // ⽣产环境的 source map}打包时配置productionSourceMap：false。剔除项⽬⽂件中map⽂件-router 路由懒加载{ path:'/singleTransverseBenchmark', component: r => ([], () => r(require('@views/benchmarkingSys/singleTransverseBenchmark')), 'lanRouter1')},根据项⽬模块进⾏设置，lanRouter1名称⼀样的会被打包进⼊⼀个⽂件，该vue关联的js和css都会按照这样的机制运⾏。3.使⽤CDN减⼩代码体积⽹络上有很多相关的资料。我的项⽬没有更改这块，因此如果⼩伙伴们有需要，可以⾃⾏搜索配置。4.测试的插件剔除测试的插件如果⽆⽤，⼀定要剔除，不要留在项⽬中。5.去掉 i uglifyjs-webpack-plugin -Dconst UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 s = {configureWebpack: config => { if (IS_PROD) { // 去掉 const plugins1 = []; ( new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, drop_debugger: false, pure_funcs: [""] //移除console } }, sourceMap: false, parallel: true }) ); s = [...s, ...plugins1]; } },}6.压缩图⽚npm i -D s = { chainWebpack: config => { // 压缩图⽚ if (IS_PROD) { .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false } // webp: { quality: 75 } }); } },}7.配置gzip，升级Zopfli（效率更⾼）gzip：npm i -D compression-webpack-pluginconst CompressionWebpackPlugin = require("compression-webpack-plugin");const IS_PROD = ["production", "prod"].includes(_ENV);const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;s = { configureWebpack: config => { const plugins = []; if (IS_PROD) { ( new CompressionWebpackPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: productionGzipExtensions, threshold: 10240, minRatio: 0.8 }) ); } s = [...s, ...plugins]; }};Zopfli：npm i -D @gfx/zopfli brotli-webpack-pluginconst CompressionWebpackPlugin = require("compression-webpack-plugin");const zopfli = require("@gfx/zopfli");const BrotliPlugin = require("brotli-webpack-plugin");const IS_PROD = ["production", "prod"].includes(_ENV);const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;s = { configureWebpack: config => { const plugins = []; if (IS_PROD) { ( new CompressionWebpackPlugin({ algorithm(input, compressionOptions, callback) { return (input, compressionOptions, callback); }, compressionOptions: { numiterations: 15 }, minRatio: 0.99, test: productionGzipExtensions }) ); ( new BrotliPlugin({ test: productionGzipExtensions, minRatio: 0.99 }) ); } s = [...s, ...plugins]; }};配置tp { ........ # GZip gzip on; gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; server { ........配置过程中，遇到的问题，具体已经记不得问题详情了，但是基本上有⼀个特点，都很奇特，解决办法如下，（以下⽅法，在你最没办法的时候可以尝试使⽤）1.删掉所有node_modules，重新npm 安装插件总是失败，可以尝试cnpm3.有⼀些插件需要匹配的基础插件的版本才能够正常运⾏。如compression-webpack-plugin需要webpack4+版，但是cli4内置的webpack版本似乎不够（也可能是我升级cli的后遗症，不确定原因），于是需要安装webpack，这时候会发现webpack和webpack-cli需要同时安装，但是安装后，⼜发现报错，研究好久，发现webpack版本太⾼，我安装的是5+，需要降版本。然后⼜发现总有⼀个奇怪的错，原来是compression-webpack-plugin版本⾼了，降版本最终的// t path = require('path');const CompressionWebpackPlugin = require("compression-webpack-plugin");const zopfli = require("@gfx/zopfli");const BrotliPlugin = require("brotli-webpack-plugin");const IS_PROD = ["production", "prod"].includes(_ENV);const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;const resolve = (dir) => (__dirname, dir);const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 // const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// const MiniCssExtractPlugin = require('mini-css-extract-plugin');s = { publicPath: "./", // 默认'/'，部署应⽤包时的基本 URL indexPath: '', // 相对于打包路径的路径 outputDir: 'dist', // 'dist', ⽣产环境构建⽂件的⽬录 assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)⽬录 lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 runtimeCompiler: true, // 是否使⽤包含运⾏时编译器的 Vue 构建版本 productionSourceMap: !IS_PROD, // ⽣产环境的 source map devServer: { open: true, // 是否打开浏览器 }, chainWebpack: config => { ks(true); // 修复热更新失效 // 添加别名 .set('@', resolve('src')) .set('@api', resolve('src/api')) .set('@tools', resolve('src/tools')) .set('@assets', resolve('src/assets')) .set('@components', resolve('src/components')) .set('@views', resolve('src/views')) .set('@router', resolve('src/router')) .set('@store', resolve('src/store')) .set('@jsonData', resolve('src/jsonData')); // 压缩图⽚ if (IS_PROD) { .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false } // webp: { quality: 75 } }); } // 展⽰打包图形化信息，会打开⼀个html页⾯，帮助⾃⼰分析哪些⽂件过⼤，可针对其进⾏优化，上线前 注释掉 // config // .plugin('webpack-bundle-analyzer') // .use(BundleAnalyzerPlugin); // 抽离 css ⽀持按需加载 - 暂⽆看到效果 // ('mini-css-extract-plugin') // .use(require('mini-css-extract-plugin'), [{ // filename: 'static/css/[name].[contenthash].css', // chunkFilename: 'static/css/[id].[contenthash].css' // }]).end(); }, // 全局样式配置 css: { loaderOptions: { sass: { prependData: `@import "./src/assets/css/default";`, }, }, }, configureWebpack: config => { if (IS_PROD) { // 去掉 const plugins1 = []; ( new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, drop_debugger: false, pure_funcs: [""] //移除console } }, sourceMap: false, parallel: true }) ); // Zopfli const plugins2 = []; if (IS_PROD) { ( new CompressionWebpackPlugin({ algorithm(input, compressionOptions, callback) { return (input, compressionOptions, callback); }, compressionOptions: { numiterations: 15 }, minRatio: 0.99, test: productionGzipExtensions }) ); ( new BrotliPlugin({ test: productionGzipExtensions, minRatio: 0.99 }) ); } s = [...s, ...plugins1, ...plugins2]; } }, }, //

pages: { index: { // page 的⼊⼝ entry: 'src/', // 模板来源 template: 'public/', // 在 dist/ 的输出 filename: '', // 当使⽤ title 选项时， // template 中的 title 标签需要是 <%= %> title: 'vue-cli4标准框架模版', // 在这个页⾯中包含的块，默认情况下会包含 // 提取出来的通⽤ chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, },}:(⾃⾏进⼊对照版本){ "name": "cli4-base", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve && webpack-dev-server --open", "dev": "vue-cli-service build --mode development", "test": "vue-cli-service build --mode test", "build": "vue-cli-service build", "webpack": "webpack --version" }, "dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "crypto-js": "^4.0.0", "echarts": "^5.1.0", "element-ui": "^2.15.1", "vue": "^2.6.11", "vue-json-excel": "^0.3.0", "vue-router": "^3.2.0", "vuescroll": "^4.17.3", "vuex": "^3.4.0" }, "devDependencies": { "@gfx/zopfli": "^1.0.15", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-plugin-component": "^1.1.1", "brotli-webpack-plugin": "^1.1.0", "compression-webpack-plugin": "^3.1.0", "image-webpack-loader": "^7.0.1", "sass": "^1.26.5", "sass-loader": "^8.0.2", "uglifyjs-webpack-plugin": "^2.2.0", "vue-template-compiler": "^2.6.11", "webpack": "^4.44.2", "webpack-cli": "^4.7.0", "webpack-dev-server": "^3.11.2" }}持续跟新，把学到的新东西，亲⾃测试后补充上来。转可以，请注明出处。