项目打包优化，体积减少了 97%

最新推荐文章于 2024-07-16 20:03:54 发布
最新推荐文章于 2024-07-16 20:03:54 发布
阅读量447 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangpugui/article/details/119849976
版权

0. 直接打包

npm run build

在这里插入图片描述

1. 按需加载第三方库

例如 ElementUI、lodash 等

npm install babel-plugin-component -D

babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

换成

import './plugins/element.js'

element.js

import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use(Button)

在这里插入图片描述

2. 移除 console.log

npm i babel-plugin-transform-remove-console -D

babel.config.js

const prodPlugins = []

if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    ...prodPlugins
  ]
}

在这里插入图片描述

3. Close SourceMap

vue.config.js

module.exports = {
  productionSourceMap: false
}

在这里插入图片描述

4. Externals && CDN

vue.config.js

module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <% if(htmlWebpackPlugin.options.isProd){ %>
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

在这里插入图片描述

5. 排除 CSS 打包，用 CDN 替代

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.set('externals', {
        'nprogress/nprogress.css': 'NProgress',
      })
    })
  }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  	<% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

在这里插入图片描述
继续优化，vue.config.js

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.set('externals', {
        'quill/dist/quill.core.css': 'VueQuillEditor',
        'quill/dist/quill.snow.css': 'VueQuillEditor',
        'quill/dist/quill.bubble.css': 'VueQuillEditor'
      })
    })
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

在这里插入图片描述

6. 区分出开发环境和线上环境的标题

public/index.html

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

7. ElementUI 使用 CDN

注意：使用了完整的 CDN 文件，之前的按需加载在生产环境就失去意义了
vue.config.js

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.set('externals', {
        './plugins/element.js': 'ELEMENT'
      })
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统
  </title>
  <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

在这里插入图片描述

8. 部署到 Nginx

下载 Nginx，双击运行 nginx.exe，浏览器输入 localhost 能看到界面表示服务启动成功！

前端 axios 中的 baseURL 指定为 /api，配置 vue.config.js 代理如下

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8888',
        changeOrigin: true
      }
    }
  }
}

路由模式、基准地址、404 记得也配置一下

const router = new VueRouter({
  mode: 'history',
  base: '/shop/',
  routes: [
    // ...
    {
      path: '*',
      component: NotFound
    }
  ]
})

执行 npm run build 打包，把 dist 中的内容拷贝到 Nginx 的 html 文件夹中

修改 Nginx 配置

http {
    server {
        listen       80;

        location / {
            # proxy_pass https://www.baidu.com;
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api {
            # 重写地址
            # rewrite ^.+api/?(.*)$ /$1 break;
            # 代理地址
            proxy_pass http://127.0.0.1:8888;
            # 不用管
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

重启服务

nginx -s reload

访问 localhost 查看下效果吧

9. 开启 Gzip 压缩

前端通过 vue.config.js 配置，打包成带有 gzip 的文件

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins = [...config.plugins, new CompressionWebpackPlugin()]
    }
  }
}

Nginx 中开启 gzip 即可

当铺鬼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
npm run build 打包爬坑记（3）打包压缩优化
陌上花开
07-01 7359
之前打包完后给后台，很好能展示出来，但是verdor很大，加载超级慢，用了路由懒加载，才好多了，但还是没有达到想要的效果，那就继续优化吧，以下是我的优化过程，有些可能不沾边或者还没解决的，欢迎留言告知，多谢 路由懒加载 这个在npm run build 打包爬坑记第5条中已说明 main.js优化思路 这是个老话题了，项目中一般都需要引入插件（例如：mint-ui），但不能在main.js...
打包优化--(保姆级教程)
aichixiangcaia的博客
10-29 512
打包优化: 在保证功能可用的前提下，让我们的文件尽可能小 在保证功能可用的前提下，让我们的页面显示出来的速度更快一些 打包命令不一定是- npm run build 而是要根据package.json 中的命令来 根据下图可以看出 打包的命令应该是 npm run build:prod 打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config....
打包优化-整体介绍
留着鼻涕敲代码
10-29 814
当项目开发完成就需要做最后的打包 打包 ： 用webpack做打包（把.vue, .js, .less ------> .js, .css, .html） 在项目中都会提供命令： npm run build （不是固定的看自己的package.json文件的配置） 打包优化: 在保证功能可用的前提下，让我们的文件尽可能小 在保证功能可用的前提下，让我们的页面显示出来的速度更快一些 打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.
npm install 打包时间优化
最新发布
xcbeyond|疯狂源自梦想，技术成就辉煌
07-16 629
通过合理使用的参数和方法，可以显著优化依赖包的安装时间。特别是在开发和 CI/CD 环境中，使用本地缓存、禁用不必要的检查和提示、并行安装等方法，可以提高安装效率，节省时间和资源。
如何处理前端打包体积过大的问题？
热门推荐
官方推荐
10-23 1万+
如何处理前端打包体积过大的问题？
记一次react前端项目打包优化的方法
10-15
以上就是针对React项目打包优化的三个关键步骤：优化第三方库、按需加载组件和启用Gzip压缩。通过这些方法，可以显著减少白屏时间，提升用户体验，并降低服务器带宽消耗。在实际操作中，还可以结合其他优化策略，如...
Vue 打包体积优化方案小结
10-15
本文将深入探讨Vue CLI 3中的打包优化策略，帮助开发者减小应用程序的体积，提高加载速度。 首先，我们可以利用`webpack-bundle-analyzer`工具来分析打包后的文件大小。通过在项目中安装这个插件，我们可以得到一个...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案...通过以上各种优化措施，可以显著减少 Vue 项目打包后的体积，提高页面加载速度，从而提升用户体验。不过需要注意，每次优化后都需要进行性能测试，以确保优化措施有效且没有引入新的问题。
vue项目打包优化.zip
05-02
Vue项目的打包优化主要包括以下几个方面： ### 1. **配置Webpack** Webpack是Vue项目常用的构建工具，通过优化其配置可以显著提升打包效率。 - **开启Source Map**：在开发阶段，使用`cheap-module-eval-source-...
Angular6项目打包优化的实现方法
10-15
本文将探讨三种主要的Angular6项目打包优化策略：输出包体组成分析文件、Rollup摇树优化以及通过修改Webpack配置进行优化。 首先，我们来看如何通过输出包体组成分析文件来了解项目打包的详细情况。Webpack的插件`...
vue项目打包部署(减小体积运行速度快！！!)
月亮不说谎! 的博客
04-29 1453
vue项目打包部署 前些时候写了一个vue商城的小项目可是呢他的体积太大了在运行上线模式的时候光运行就花了好长时间,原因是因为项目的体积太大了所以运行起来就耗费时间。 所谓时间就是金钱，时间就是生命啊。所以我们不能浪费金钱和生命。那么就通过分散资源来减小项目体积吧。 一.使用CDN的方法 第一步就是分开生产环境和开发环境 1.1因为main.js是打包文件所以运行npm run build生产环境...
打包和优化
许小墨的菜鸡博客
05-27 1358
项目打包与优化
vue项目打包之减小包的体积
csdn姚宏波
04-22 1725
默认情况下，凡是通过 import 方式引入的包，打包时都会被打包，这就会导致最后的包体积比较大，伴随而来的就是程序的加载速度慢 解决方法主要是两个 一个是使用CDN 一个是路由的懒加载 先说 CDN 核心思想就是将线上环境中用到一些依赖，比如 vue、vueRouter 、axios 等，使用 cdn 节点的方式引用，而不是打到包里去，当然我们开发时依赖的一些包，最好还是使用本地包，而...
webpack 打包 性能优化
purple_lumpy的博客
09-08 311
当我们在打包一些大的项目的时候，会发现，打包的时间非常非常的长。 这时候除了等待，我们还可以思考如何提高webpack 打包效率。 比如下面几个点： 1. 版本更新（技术迭代） 升级 webpack / node / npm / yarn 版本 2. 尽可能少的模块上应用 Loader 如下，我们通过设施exclude，使node_modules 中的代码，不用load...
减小发布到npm包的体积与避免重复依赖
飞翔的熊blabla
09-15 1839
这两天一直在忙于封装一个vue table组件并发布到npm，记录一下我是如何把npm包的大小从100多kb减小到不足1kb的过程。 背景 这个组件底层依赖于element-ui，使用了其table组件和pagination组件，最终的组件是一个完全通过配置来描述每一列的表格组件。最开始我发布的是打包之后的代码。如果使用的这个组件的项目中没有引入过element-ui组件，那么不会造成任何重复的依赖，直接引用打包后的版本。但是如果项目本身已经引入了完整的element-ui(我们公司使用这个组件的10余
Vue项目打包后体积很大
qq_34576748的博客
08-20 3632
版权声明：本文为CSDN博主「小白阿里里」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_39224266/article/details/83894187 在通过 npm run build 命令后得到项目文件发现体积很大，其实这是由于在打包时生成了.map 文件，因为项目打包后，代码都是经过压缩加密...
vue 第三方组件按需引入，最后项目的包体积真的变小了吗？
东扯葫芦西扯瓜——前端小菜鸟的博客
09-18 2996
前端打包体积的优化，减少打包体积，也算是前端老生常谈的问题了。我们最常用的方法之一就是按需引入组件！各大组件库，如ant-design，element-ui，都有按需引入的栗子，有些会告诉你，按需引入，可以减少包体积！百度搜索“组件按需引入”，会有一大堆文章告诉你组件如何按需引入，并且大部分都不约而同的复制了这句话：按需引入可以减少打包体积！
打包体积的分析和优化
2303_76567022的博客
01-15 427
打包体积的分析和优化--2分钟速懂
原生CLI指令构建npm run减少硬盘node_modules的开销
pulledup的博客
09-14 1346
试想，如果每个工程，都这么部署，那么你如果构建的项目稍微一多，那么磁盘分卷的空间，将会很快吃紧，一两个T的固态硬盘空间很快耗尽。@vue/cli安装并生成vue项目后，node_modules的依赖树，经过构建工具这么一折腾，其磁盘“缓存”剧增。利用vue-cli-service的本质及其原生指令，可以很好地解决这一困惑，如下。那么，我们只需用文本编辑器，编辑两个操作系统的“批处理”可执行文件，即可。这属于操作系统方面的知识，这里就不再赘述了。其中，脚本命令可以做如下替换。那么，它在现实中有什么意义呢？
react打包优化体积
06-03
React应用打包优化体积的方法有以下几个： 1. 使用webpack-bundle-analyzer分析打包后的代码，查看每个模块的大小，找出占用空间较大的模块，进行优化。 2. 使用webpack的tree shaking功能，只打包用到的模块，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

当铺鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值