vue-cli4 解决项目首次加载慢——手抄

作者: 背着生活往前走你才辨的出美和丑 | 来源:发表于2021-04-27 09:42 被阅读0次

vue-cli4 解决项目首次加载慢——手抄
spring boot的hystrix组件出现首次调用慢的问题
Vue首屏加载慢的优化方案
创建vue-cli4项目，报错 ERROR command fa
vue开发 --- 页面延迟加载组件
使用react-router做延迟加载路由配置
关于vue在app首次加载缓慢的解决办法
ionic2 项目中解决安卓首次加载慢的问题
让你“爱”上 GitHub，解决访问时图裂、加载慢的问题
解决Vue打包文件大，首次加载慢的问题

之前做了一个vue-cli2的vue2项目，一切都OK，唯独部署后，首次加载特别慢。
查看了谷歌Network，发现有多个js和css文件特别大，大概区间在2Mb~8Mb之间。加载时间是2s到9s。
针对这个问题，深入探索了很多博客。
因为网络上的相关文档，相关的内容比较混乱，比如，脚手架的版本不对应导致的相关配置无法使用，我在这里只讲解cli4的配置。

解决方向，主要如下。

0.chunk-vendors.js配置（重要）

打包后chunk-vendors.js文件大，需要查看main.js文件，所有引入的包。

1 UI框架：ElementUI，IView，Ant等，一定按需引入。
2 非全局的，引入到vue文件中，不要做全局。
3 低效的，去除。

1.vue.config.js配置

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
module.exports = {
  productionSourceMap: !IS_PROD, // 生产环境的 source map
}

打包时配置productionSourceMap：false。剔除项目文件中map文件

2.vue-router 路由懒加载

{
  path:'/singleTransverseBenchmark',
  component: r => require.ensure([], () => r(require('@views/benchmarkingSys/singleTransverseBenchmark')), 'lanRouter1')
},

根据项目模块进行设置，lanRouter1名称一样的会被打包进入一个文件，该vue关联的js和css都会按照这样的机制运行。

3.使用CDN减小代码体积

网络上有很多相关的资料。我的项目没有更改这块，因此如果小伙伴们有需要，可以自行搜索配置。

4.测试的插件剔除

测试的插件如果无用，一定要剔除，不要留在项目中。

5.去掉 console.log

npm i uglifyjs-webpack-plugin -D

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 console.log
module.exports = {
configureWebpack: config => {
    if (IS_PROD) {
      // 去掉console.log
      const plugins1 = [];
      plugins1.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      config.plugins = [...config.plugins, ...plugins1];
    }
  },
}

6.压缩图片

npm i -D image-webpack-loader

module.exports = {
  chainWebpack: config => {
    // 压缩图片
    if (IS_PROD) {
      config.module
        .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-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  }
};

Zopfli：
npm i -D @gfx/zopfli brotli-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const zopfli = require("@gfx/zopfli");
const BrotliPlugin = require("brotli-webpack-plugin");

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({
          algorithm(input, compressionOptions, callback) {
            return zopfli.gzip(input, compressionOptions, callback);
          },
          compressionOptions: {
            numiterations: 15
          },
          minRatio: 0.99,
          test: productionGzipExtensions
        })
      );
      plugins.push(
        new BrotliPlugin({
          test: productionGzipExtensions,
          minRatio: 0.99
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  }
};

配置nginx.conf


http {
    ........
    # 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 install

2.npm安装插件总是失败，可以尝试cnpm

3.有一些插件需要匹配的基础插件的版本才能够正常运行。如compression-webpack-plugin需要webpack4+版，但是cli4内置的webpack版本似乎不够（也可能是我升级cli的后遗症，不确定原因），于是需要安装webpack，这时候会发现webpack和webpack-cli需要同时安装，但是安装后，又发现报错，研究好久，发现webpack版本太高，我安装的是5+，需要降版本。然后又发现总有一个奇怪的错，原来是compression-webpack-plugin版本高了，降版本！！！

最终的vue.config.js

// vue.config.js
const 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(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const resolve = (dir) => path.join(__dirname, dir);
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 console.log
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; 
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  publicPath: "./", // 默认'/'，部署应用包时的基本 URL
  indexPath: 'index.html', // 相对于打包路径index.html的路径
  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 => {
    config.resolve.symlinks(true); // 修复热更新失效
    // 添加别名
    config.resolve.alias
      .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) {
      config.module
        .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 支持按需加载 - 暂无看到效果
    // config.plugin('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) {
      // 去掉console.log
      const plugins1 = [];
      plugins1.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      // Zopfli
      const plugins2 = [];
      if (IS_PROD) {
        plugins2.push(
          new CompressionWebpackPlugin({
            algorithm(input, compressionOptions, callback) {
              return zopfli.gzip(input, compressionOptions, callback);
            },
            compressionOptions: {
              numiterations: 15
            },
            minRatio: 0.99,
            test: productionGzipExtensions
          })
        );
        plugins2.push(
          new BrotliPlugin({
            test: productionGzipExtensions,
            minRatio: 0.99
          })
        );
      }
      config.plugins = [...config.plugins, ...plugins1, ...plugins2];
    }
  },
  // 
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'vue-cli4标准框架模版',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },

}

package.json:(自行进入对照版本)

{
  "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"
  }
}

持续跟新，把学到的新东西，亲自测试后补充上来。
转可以，请注明出处。

vue-cli4 解决项目首次加载慢——手抄
之前做了一个vue-cli2的vue2项目，一切都OK，唯独部署后，首次加载特别慢。查看了谷歌Network，发现...
spring boot的hystrix组件出现首次调用慢的问题
一、hystrix调用内部服务慢二、解决问题因为我们项目默认使用的是spring懒汉加载模式，导致首次会去做类...
Vue首屏加载慢的优化方案
使用vue构建项目首屏加载时，出现加载慢，白屏的问题解决方案：步骤一 webpack来打包vue项目，vendo...
创建vue-cli4项目，报错 ERROR command fa
创建vue-cli4项目时候一直报：ERROR command failed: yarn附上解决方案：https:...
vue开发 --- 页面延迟加载组件
问题：单页面引入的组件页面多，多数首次不显示的的dom元素，导致进入页面的时候加载慢。参考的解决文档： https...
使用react-router做延迟加载路由配置
情景描述客户要求我们首次打开页面的时候必须在1s之内可是项目很大，首页加载模块体积大首屏加载时间长为了解决这...
关于vue在app首次加载缓慢的解决办法
满怀欣喜的开发vue项目，快要完成的时候，测试人员发现在app中首次加载慢的跟便秘一样，无奈要优化，于是开始各种找...
ionic2 项目中解决安卓首次加载慢的问题
因cli 脚手架搭出来的框架有默认的4-5s的开屏动画时间、或者延迟时间只需要修改config.xml文件：将所...
让你“爱”上 GitHub，解决访问时图裂、加载慢的问题
hello，小伙伴们，大家好，今天给大家介绍的开源项目是解决你访问GitHub加载慢的问题，解决访问时图裂等问题，...
解决Vue打包文件大，首次加载慢的问题
未压缩前的压缩后的那么如何压缩的呢，接着往下看 1.首先在config/index.js里把productio...