前端项目优化:减少webpack打包体积

这篇具有很好参考价值的文章主要介绍了前端项目优化:减少webpack打包体积。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近自己买个云服务器,把之前搭建的webpack-vue项目进行了部署,现在项目已经成功了。

项目地址:GitHub - wjt162286793/webpack----vue: 使用webpack配置一个脚手架,对照文档,纯手打

 线上地址:IAM架构资产管理系统

不过是没有经过任何优化的,虽然项目体积和业务不是很复杂,但是实际上打完包后体积也是比较大,首次加载也是需要请求大资源文件,导致项目加载很慢,而且还有很多console.log的内容在控制台上,效果如下

前端项目优化:减少webpack打包体积,webpack,webpack,前端

前端项目优化:减少webpack打包体积,webpack,webpack,前端

前端项目优化:减少webpack打包体积,webpack,webpack,前端

我这个项目最多算一个中小型,现在的包就87MB那么大,我在线上部署了一下,白屏16秒......

本文主要针对webpack进行优化,版本为webpack5,并不对业务代码本身进行优化,因为本身业务代码也不是特别的多,编写的时候也是注重代码的结构的

优化

1.拆包

用webpack打包后,vendors.js是所有当前项目中所有的依赖包和业务代码的综合,我们就要想办法让vendors包的提交大大缩减

(1)将每个业务组件分成单独的js文件

在配置路由时,我们可以使用懒加载和webpackChunkName,将每个路由组件都生成小包,脱离掉vendors.js

 {
   path: '/dashboard/business/businessList',
   name: 'businessList',
   meta: {
       name: '列表'
    },
   component: () => import(/* webpackChunkName:'businessList'*/ 'pages/business/components/businessList.vue')
    },

(2)使用externals筛除依赖包,改用cdn服务加载

注意:如果用户是可以连接到互联网的情况下,可以这样使用。如果用户是无法访问互联网和对应cdn地址的,就不可以这样去做了。

externals配置

当你使用了externals之后,里面配置的包就不会出现在打包中

  externals: {
    'vue': 'Vue',
    'axios': 'axios',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'html2canvas': 'html2canvas',
    'lodash': '_'
  },

在项目中,我们引入的方式必须要要和这里面的一致

key是包名,value是这个包默认导出的名字(!!!一定要写对)

例如:vue3就没有导出vue,而是import {creatApp} from 'vue'

我们这里就要写成这个样子

//原来的写法
//import {createApp} from 'vue'

const Vue = require('vue')
import Main from './main.vue'
export const mainVue = Vue.createApp(Main)

其他同理

cdn的使用

如果我们使用externals排除了某个包,就需要在index.html中引入cdn地址。

这里注意,cdn的包地址一定要引对。

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.1.0/vuex.global.prod.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.16/vue-router.global.prod.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

这里有一个很简单的测试方法,你去cdn地址上将代码复制下来,在本地去测一下,看能不能成功使用你在externals中使用的包类名

前端项目优化:减少webpack打包体积,webpack,webpack,前端

 前端项目优化:减少webpack打包体积,webpack,webpack,前端

 如果不能对的上,那你发到生产上就会报错

所以,找cdn的地址一定要找对

2.ui组件库的处理

大部分项目都会用到ui组件库,如element-ui或者element-plus,echarts等等

这里有一个原则,如果你的项目中基本把这个组件库的绝大多数组件都用了,那你就可以直接将这个组件库也用cdn的形式引用了。如果没有的话,那你就是用按需引入的方式去引入该ui组件库

大部分的组件库都给提供了按需引入的方式,对照着文档操作就可以了

3.依赖包的抽取

比如一个包在多个文件中使用,我们只需要抽取一次就可以了,这样也可以减除很多的冗余代码

    optimization: {
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },

4.使用gzip压缩

const CompressionPlugin = require('compression-webpack-plugin');
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip', // 使用gzip算法进行压缩
      test: /\.(js|css)$/, // 需要压缩的文件类型
      threshold: 10240, // 文件大小大于10KB才会被压缩
      minRatio: 0.8, // 压缩比例达到0.8才会被压缩
      deleteOriginalAssets: false, // 是否删除原始文件
    }),
    //...
  ],

使用了gzip之后,打包后的文件就会生成.gz的压缩文件,也是常见有效的优化,能是构建包更轻量

5.生产环境去掉debug,注释,打印语句

const TerserPlugin = require('terser-webpack-plugin');
  optimization: {
    //生产环境上干掉所有的js注释和日志
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,   //删除注释
          },
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']//删除打印语句
          }
        },
        extractComments: false,

      }),
    ],
  },

6.生产环境去除sourceMap

在开发的时候,我们为了方便查找错误,配置了soureMap。

但是在打包构建的时候,就需要关闭sourceMap了。其一是可以不打包map文件减少体积,其二是可以避免源码泄露。

在配置中加一行

devtool: false

7.对其他静态资源的压缩

在打包时,js文件会默认压缩。但是很多静态文件之类的不会,特别是图片等资源。

这里我就不在文档中写具体怎么操作了,网上一搜一大把。后续我会在webpack系列中对各种plugin进行演示

结果

现在我在打包一次,可以看看效果

前端项目优化:减少webpack打包体积,webpack,webpack,前端

 前端项目优化:减少webpack打包体积,webpack,webpack,前端

 效果也是很明显的

前端项目优化:减少webpack打包体积,webpack,webpack,前端

项目地址

特意说明一下:现在项目也只是完成了初版的,后续还有东西要往里面写。优化还有一些提升的空间

业务也都是模拟的假业务,是为了技术练习,没有任何的实际意义,也没有侵犯任何单位的行为。

项目地址:GitHub - wjt162286793/webpack----vue: 使用webpack配置一个脚手架,对照文档,纯手打

线上地址:IAM架构资产管理系统

感觉有用的在github上给个star吧!文章来源地址https://www.toymoban.com/news/detail-812553.html

到了这里,关于前端项目优化:减少webpack打包体积的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端项目体积优化策略

    在前端开发中,项目体积优化是一个重要的环节,它直接影响到网页的加载速度和用户体验。随着前端项目越来越复杂,引入的依赖也越来越多,如何有效地减少最终打包文件的大小,成为了前端工程师需要面对的挑战。以下是一些常见的前端项目体积优化策略: 1. 代码分割

    2024年04月13日
    浏览(40)
  • 前端性能优化——包体积压缩插件,打包速度提升插件,提升浏览器响应的速率模式

    –其他的优化可以具体在网上搜索 压缩项目打包后的体积大小、提升打包速度,是前端性能优化中非常重要的环节,结合工作中的实践总结,梳理出一些 常规且有效 的性能优化建议 ue 项目可以通过添加–report命令: \\\"build\\\": \\\"vue-cli-service build --report\\\" ,打包后 dist 目录会生成

    2024年02月12日
    浏览(55)
  • vue项目打包优化:缩小体积productionSourceMap设置,使用cdn加速

    一、vue项目打包体积大优化之productionSourceMap设置 1、productionSourceMap 的作用 productionSourceMap 在构建时生成完整的 SourceMap 文件,默认情况下开启。生产环境中启用 productionSourceMap 有助于开发者调试代码,可以在浏览器的调试工具中查看到源文件中错误的代码位置,而不是编译后

    2024年02月21日
    浏览(44)
  • Unity减少发布打包文件的体积(二)——设置WebGL发布时每张图片的压缩方式

    一个项目在发布成WebGL后,其体积至关重要,体积太大,用户加载会经历一个漫长的等待…轻则骂娘,重则用脚把电脑踢烂(扣 质 保 金 )… 那么如何减少发布后的体积呢,本文从图片的压缩开始入手。 前传回顾: Unity减少发布打包文件的体积(一)——获取精灵图片的信息限

    2024年02月04日
    浏览(43)
  • 用webpack做一些前端打包时的性能优化

    一.webpack 的五个核心概念 1.Entry:入口指示,webpack以哪个文件为入口起点开始打包,分析构建内部依赖图 2.output:输出指示,webpack打包后的资源bundles输出到哪里去,以及如何命名 3.loader :loader让webpack能够去处翻译理那些非js文件(img css…) 4.Plugins :Plugins插件可以用于执行范围

    2024年02月12日
    浏览(50)
  • 【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析

    rollup-plugin-visualizer 是一个用于Rollup构建工具的插件,它可以生成可视化的构建报告,帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。 使用 rollup-plugin-visualizer 插件,可以在构建完成后生成一个交互式的HTML报告,其中包含了构建过程中的各种统计信息,如文

    2024年02月07日
    浏览(54)
  • 前端Vue项目webpack打包部署后源码泄露解决

    前端项目使用nuxt框架(基于Vue),采用Webpack打包,部署到服务器后,进行漏洞检测。 经Webpack打包部署到服务器后,访问并打开开发者模式,在Source下出现[name]路径,内部包含(webpack)buildin文件夹。(做漏洞分析时,会认为该内容涉及源码泄露) 1.首先考虑源码泄露的问题 打

    2024年02月03日
    浏览(86)
  • node.js+NPM包管理器+Webpack打包工具+前端项目搭建

    javascript运行环境(无需依赖html文件) BFF,服务于前端的后端 官网下载安装,node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行(或者通过工具的集成终端) node 01.js 如果出现权限原因,可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

    2024年02月07日
    浏览(73)
  • vite配置cdn优化打包体积

    大家都知道前端性能优化的方法,cdn外部引入的方法可以使项目打包后体积大大缩小,所以是前端性能优化方面非常推荐的方法之一。 本文关于 vite2 vue3 + Ts 项目如何cdn引入 element plus 做一个简单教程,我们可以通过两种方式引入配置cdn。 由于 vite 的核心基于 rollup 和 webpac

    2024年02月05日
    浏览(43)
  • webpack打包优化指南

    前言 目前所有公司项目的代码量都比较大,打包出来的文件会很大,甚至导致打包压缩代码时内存不足,页面加载速度也较慢。为了优化加载速度,下面提供一些编码指导建议: 一、浏览器(chrome)运行指标 浏览器请求并发数量, chrome 请求并发数量为 6 个 webpack 优化目的是为

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包