前端性能优化

wytraining

已于 2023-04-01 21:40:01 修改

阅读量454

点赞数

文章标签：前端性能优化 webpack

于 2023-04-01 21:07:35 首次发布

本文链接：https://blog.csdn.net/wytraining/article/details/129901239

版权

通过webpack-bundle-analyzer分析项目初始体积和速度，采用externals移出公共依赖，利用CDN加速加载。按需引入组件库以减少体积，如babel-plugin-component用于ElementUI或ViewDesign。剔除未使用的moment.js语言包，使用gzip压缩提高文件传输效率，压缩比率可达70%以上。

摘要由CSDN通过智能技术生成

一：项目初始体积与速度

可以安装 webpack-bundle-analyzer 插件，生成代码分析报告，帮助提升代码质量和网站性能。

1.安装

npm install webpack-bundle-analyzer -D

2.在 vue.config.js 中引入

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

3.npm run serve运行后，在浏览器打开http://127.0.0.1:6543/ 可以看到分析页面
初始体积： 9.86M
在这里插入图片描述
打包速度：58597ms

二：优化方式

2.1 externals 提取项目依赖

从上面的打包分析页面中可以看到，chunk-vendors.js 体积为 2.21M，其中最大的几个文件都是一些公共依赖包，那么只要把这些依赖提取出来，就可以解决 chunk-vendors.js 过大的问题

可以使用 externals 来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中

1.vue.config.js 中配置：

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts'
    }
}

2.在 index.html 中使用 CDN 引入依赖

<body>
    <script src="http://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
    <script src="http://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="http://lib.baomitu.com/axios/1.2.1/axios.min.js"></script>
    <script src="http://lib.baomitu.com/echarts/5.3.2/echarts.min.js"></script>
  </body>

2.2 组件库的按需引入

1.为什么没有使用 externals 的方式处理组件库呢？（externals缺点： 直接在html内引入的，失去了按需引入的功能，只能引入组件库完整的js和css）

2.组件库按需引入的原理：只引入指定组件和对应的样式，来实现减少组件库体积大小（借助 babel-plugin-component 插件）

3.使用
安装 babel-plugin-component

npm install babel-plugin-component -D

babel.config.js中引入

module.exports = {
    presets: [
        "@vue/cli-plugin-babel/preset"
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "view-design",
                "libraryDirectory": "src/components"
            },
            "view-design"
        ],
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ],
    ],
    sourceType: 'unambiguous'
}

2.3 减小三方依赖的体积（可以用day.js替代moment.js）

继续分析打包文件，项目中使用了 moment.js，发现打包后有很多没有用到的语言包
在这里插入图片描述
使用 moment-locales-webpack-plugin 插件，剔除掉无用的语言包

1.安装

npm install moment-locales-webpack-plugin -D

2.vue.config.js 中引入

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  configureWebpack: {
     plugins: [
       new MomentLocalesPlugin({localesToKeep: ['zh-cn']})
     ]
  }
}

2.4 Gzip压缩

线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度

对文件的大小进行压缩，减少http传输过程中宽带的损耗：html、js、css资源，使用 gzip 后通常可以将体积压缩70%以上

这里介绍下使用 webpack 进行 gzip 压缩的方式，使用 compression-webpack-plugin 插件

1.安装

npm install compression-webpack-plugin -D

2.在vue.config.js 中引入

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
     plugins: [
      new CompressionPlugin({
        test: /\.(js|css)(\?.*)?$/i, //需要压缩的文件正则
        threshold: 1024, //文件大小大于这个值时启用压缩
        deleteOriginalAssets: false //压缩后保留原文件
      })
     ]
  }
}

前端性能优化——包体积压缩82%、打包速度提升65%
当面试官问我前端可以做的性能优化有哪些
 正确使用externals，vue工程构建性能提升67%

wytraining

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化

线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度。来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中。2.组件库按需引入的原理：只引入指定组件和对应的样式，来实现减少组件库体积大小（借助 babel-plugin-component 插件）2.在 vue.config.js 中引入。
复制链接

扫一扫