甲方嫌弃，项目首页加载太慢

置顶

精

活动

有一天，甲方打开一个后台管理的项目，说有点卡，不太满意，项目经理叫我优化，重新打包一下。

从输入地址 到 展示 首屏，最佳时间在 3秒内，否则，甲方挂脸，咱就有可能有被裁的风险，understand?

废话不多说，先来看一下怎么个优化法吧。

优化

✅ cdn

分析

用Webpack Bundle Analyzer分析依赖，安装webpack-bundle-analyzer打包分析插件：

# NPM
npm install --save-dev webpack-bundle-analyzer

# Yarn
yarn add -D webpack-bundle-analyzer

反正都是装，看着来。

配一下：

// vue.config.js 文件里。（没有就要新建一下）

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

打包

执行打包命令并查看分析

npm run build --report

打包结束后，会在项目根目录下生成dist文件。自动跳到127.0.0.1:8888（没有跳的话，手动打开dist文件夹下的report.html），这个网址就是打包分析报告。

占得比较大的块，就是Element UI组件库和echarts库占的空间比相对较大。

这就要考虑，第一，要按需，要啥再用啥，不要一股脑啥都装。按需安装，按需加载。

第二，考虑单独引入这些组件库的cdn，这样速度也会咔咔提升。

详细讲一下怎么搞cdn。

按需大家都知道，要啥再引入啥，再装啥。

比如element-ui，我要uninstall掉，然后呢，去引入cdn，不要装库了，用cdn。

去package.json里面看element-ui装了啥版本，然后看完之后，就npm uninstall element-ui卸载掉。

去cdn库里面去找https://www.staticfile.org/，(首先先说一下，要找免费的开放的那种，因为一般有的公司没有自家的cdn，没有自家的桶，有的话，直接把js文件地址拖上去，然后得到一个地址，这样也安全，也方便，但没有的话另说)。

样式库: https://cdn.staticfile.org/element-ui/2.15.12/theme-chalk/index.min.css 
组件库：https://cdn.staticfile.org/element-ui/2.15.12/index.min.js

然后去public/index.html入口文件中，去加入这个东西，像咱以前写原生一样引入就好,body里面引入js，head里面引入css。：

所以这样子，就引入好了。接着在main.js里面，把之前import的所有element的样式删掉。

接着，vue.config.js的configureWebpack加个externals字段：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ],
  externals: {
    'element-ui': 'ELEMENT' // key 是之前install下下来的包名，element-ui。value是全局变量名(ELEMENT)
  }
}

externals: Webpack 的 externals 配置用于声明某些依赖应该从外部获取，而不是打包到最终的 bundle 中。这样可以减小打包体积，前提是这些依赖已经在运行环境中存在。

'element-ui': 'ELEMENT' 的含义

• 当你的代码中 import 'element-ui' 时，Webpack 不会打包 element-ui，而是会从全局变量 ELEMENT 中获取它。
• ELEMENT 是 element-ui 库通过
  • 那么 element-ui 会挂载到 window.ELEMENT 上。

  为什么这样配置？

  • 通常是为了通过 CDN 引入 element-ui（而不是打包它），从而优化构建速度和体积。
  • 你需要确保在 HTML 中通过 javascript 体验AI代码助手 代码解读 复制代码 // webpack.config.js module.exports = { externals: { 'element-ui': 'ELEMENT' // 告诉 Webpack：import 'element-ui' 时，返回全局的 ELEMENT } }; javascript 体验AI代码助手 代码解读 复制代码 // 你的代码中依然可以正常 import（但实际用的是全局变量） import ElementUI from 'element-ui'; // 相当于：const ElementUI = window.ELEMENT;

    注意事项：

    • 确保全局变量名（ELEMENT）和 element-ui 的 CDN 版本一致。不同版本的库可能有不同的全局变量名。
    • 如果使用模块化打包（如 npm + Webpack 全量打包），则不需要配置 externals。

    这里有的伙伴就说，我咋知道是ELEMENT，而不是element呢。

    这里是这么找的：

    直接在浏览器控制台检查 在 HTML 中通过 CDN 引入该库：

    打开浏览器开发者工具（F12），在 Console 中输入：

    console.log(window);
    

    然后查找可能的全局变量名（如 ELEMENT、ElementUI 等）。

    cdn配置之后，重新分析

    npm run build --report
    

    重新用cdn的去分析，

    那么就很舒服了，也因此，这个就是cdn优化的方法。

    ✅ nginx gzip压缩

    server {
            listen       8103;
            server_name  ************;
    		# 开启gzip
    	    gzip on;
    	    # 进行压缩的文件类型。
    	   	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    	    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    	    gzip_vary on;
    }
    
    

    ✅vue gzip压

    安包：npm i compression-webpack-plugin@1.1.12 --save-dev

    注意版本匹配问题。

    vue配置，这段配置是 Webpack 构建中关于 Gzip 压缩 的设置，位于 config/index.js 文件中。:

    //文件路径  config --> index.js
    build: {
      productionGzip: true, // 启用生产环境的 Gzip 压缩
      productionGzipExtensions: ['js', 'css'], // 需要压缩的文件类型
    }
    

    1. productionGzip: true
    • 作用：开启 Gzip 压缩，减少静态资源（JS、CSS）的体积，提升页面加载速度。
    • 要求：需要安装 compression-webpack-plugin（如注释所述）。

    npm install --save-dev compression-webpack-plugin
    

    1. productionGzipExtensions: ['js', 'css']
    • 指定需要压缩的文件扩展名（默认压缩 JS 和 CSS 文件）。

    为什么需要 Gzip？

    • 优化性能：Gzip 压缩后的资源体积可减少 60%~70%，显著降低网络传输时间。
    • 服务器支持：大多数现代服务器（如 Nginx、Netlify）会自动对静态资源进行 Gzip 压缩，但本地构建时提前生成 .gz 文件可以避免服务器实时压缩的开销。

    
    

    机-会

    技术大厂，前端-后端-测试，新一线和一二线城市等地均有机-会，感兴趣可以试试。待遇和稳定性都还不错~

    
    

    
    

    ✅ 按需加载路由

    路由级代码分割（动态导入）

    // 原写法
    import About from './views/About.vue'
    
    // 优化后写法
    const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')
    

    • 首页只加载核心代码（home路由）
    • about模块会在用户点击about路由时才加载
    • 显著减少首屏加载资源体积

    ✅ 合理配置 prefetch策略

    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        // 移除prefetch插件
        config.plugins.delete('prefetch')
        
        // 或者更精细控制
        config.plugin('prefetch').tap(options => {
          options[0].fileBlacklist = options[0].fileBlacklist || []
          options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
          return options
        })
      }
    }
    

    • 禁用prefetch：减少不必要的带宽消耗，但可能增加后续路由切换等待时间
    • 启用prefetch：利用浏览器空闲时间预加载，提升用户体验但可能浪费带宽
    • 折中方案：只对关键路由或高概率访问的路由启用prefetch

    ✅ splitChunks 将node_modules中的依赖单独打包

    拆分vendor：将node_modules中的依赖单独打包

    config.optimization.splitChunks({
     chunks: 'all',
     cacheGroups: {
       vendors: {
         name: 'chunk-vendors',
         test: /[\\/]node_modules[\\/]/,
         priority: -10,
         chunks: 'initial'
       }
     }
    })
    

    ✅ 按需引入 lodash

    import debounce from 'lodash/debounce'
    

    用啥再引啥。

    甲方笑了

    打开首页闪电一进，完美ending！！！

    
    

    散会啦😊

    
    

    ——转载自：jack_po