网络编程
位置：首页>> 网络编程>> JavaScript>> vue项目打包优化的方法实战记录

vue项目打包优化的方法实战记录

作者：一只小菜鸡111　　发布时间：2024-04-26 17:39:50　

标签：vue,打包,优化

1.按需加载第三方库

例如 ElementUI、lodash 等

a, 装包

npm install babel-plugin-component -D

b, babel.config.js

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

c, 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, Form, FormItem, Input, Message, Header, Container, Aside, Main, Menu, Submenu, MenuItemGroup, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select, Option, Cascader, Alert, Tabs, TabPane, Steps, Step, CheckboxGroup, Checkbox, Upload, Timeline, TimelineItem } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Header)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
Vue.use(Alert)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Steps)
Vue.use(Step)
Vue.use(CheckboxGroup)
Vue.use(Checkbox)
Vue.use(Upload)
Vue.use(Timeline)
Vue.use(TimelineItem)

// 把弹框组件挂着到了 vue 的原型对象上，这样每一个组件都可以直接通过 this 访问
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

效果图 

vue项目打包优化的方法实战记录

优化 按需加载第三方工具包（例如 lodash）或者使用 CDN 的方式进行处理。

按需加载使用的工具方法  (当用到的工具方法少时按需加载打包)  用到的较多通过cdn 

通过form lodash 搜索 哪处用到

例如此处的 1.

vue项目打包优化的方法实战记录

vue项目打包优化的方法实战记录

换成 

vue项目打包优化的方法实战记录

按需导入 

效果图

vue项目打包优化的方法实战记录

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
 ]
}

 效果图

vue项目打包优化的方法实战记录

3. Close SourceMap

生产环境关闭 功能

vue.config.js

module.exports = {
 productionSourceMap: false
}

 效果图

vue项目打包优化的方法实战记录

4. Externals && CDN

通过 externals 排除第三方 JS 和 CSS 文件打包，使用 CDN 加载。

vue.config.js

module.exports = {
 productionSourceMap: false,
 chainWebpack: (config) => {
   config.when(process.env.NODE_ENV === 'production', (config) => {
     const cdn = {
       js: [
         'https://cdn.staticfile.org/vue/2.6.11/vue.min.js',
         'https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js',
         'https://cdn.staticfile.org/axios/0.18.0/axios.min.js',
         'https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js',
         'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',
         'https://cdn.staticfile.org/quill/1.3.4/quill.min.js',
         'https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js'
       ],
       css: [
         'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css',
         'https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css',
         'https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css',
         'https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css'
       ]
     }
     config.set('externals', {
       vue: 'Vue',
       'vue-router': 'VueRouter',
       axios: 'axios',
       echarts: 'echarts',
       nprogress: 'NProgress',
       'nprogress/nprogress.css': 'NProgress',
       'vue-quill-editor': 'VueQuillEditor',
       'quill/dist/quill.core.css': 'VueQuillEditor',
       'quill/dist/quill.snow.css': 'VueQuillEditor',
       'quill/dist/quill.bubble.css': 'VueQuillEditor'
     })
     config.plugin('html').tap((args) => {
       args[0].isProd = true
       args[0].cdn = cdn
       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){ ％>
   <％ for(var css of htmlWebpackPlugin.options.cdn.css) { ％>
     <link rel="stylesheet" href="<％=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 -->
 <％ if(htmlWebpackPlugin.options.isProd){ ％>
   <％ for(var js of htmlWebpackPlugin.options.cdn.js) { ％>
     <script src="<％=js％>"></script>
     <％ } ％>
       <％ } ％>
</body>

</html>

效果图

vue项目打包优化的方法实战记录

继续对 ElementUI 的加载方式进行优化 

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>

效果图

vue项目打包优化的方法实战记录

5.路由懒加载的方式

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)

const routes = [
 {
   path: '/',
   redirect: '/login'
 },
 {
   path: '/login',
   component: Login
 },
 {
   path: '/Home',
   component: () => import('../components/Home.vue'),
   redirect: '/welcome',
   children: [
     {
       path: '/welcome',
       component: () => import('../components/Welcome.vue')
     },
     {
       path: '/users',
       component: () => import('../components/user/Users.vue')
     },
     {
       path: '/rights',
       component: () => import('../components/power/Rights.vue')
     },
     {
       path: '/roles',
       component: () => import('../components/power/Roles.vue')
     },
     {
       path: '/categories',
       component: () => import('../components/goods/Cate.vue')
     },
     {
       path: '/params',
       component: () => import('../components/goods/Params.vue')
     },
     {
       path: '/goods',
       component: () => import('../components/goods/List.vue')
     },
     {
       path: '/goods/add',
       component: () => import('../components/goods/Add.vue')
     },
     {
       path: '/orders',
       component: () => import('../components/order/Order.vue')
     },
     {
       path: '/reports',
       component: () => import('../components/report/Report.vue')
     }
   ]
 }
]

const router = new VueRouter({
 routes
})

router.beforeEach((to, from, next) => {
 // to 要访问的路径
 // from 从哪里来的
 // next() 直接放行，next('/login') 表示跳转
 // 要访问 /login 的话那直接放行
 if (to.path === '/login') return next()
 const tokenStr = window.sessionStorage.getItem('token')
 // token 不存在那就跳转到登录页面
 if (!tokenStr) return next('/login')
 // 否则 token 存在那就放行
 next()
})

export default router

其他：图片压缩、CSS 压缩和提取、JS 提取...

vue项目打包优化的方法实战记录

1.部署到 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 查看下效果吧

开启 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 即可

来源：https://blog.csdn.net/weixin_68531033/article/details/126342877

0
投稿

猜你喜欢

  • 实现思路和详细解读1. 获取 Fashion 数据、处理数据（1）本次实践项目用到的是 Fashion 数据集，包含 10 个类别的服饰灰度
  • web跨域请求1.为什么要有跨域限制举个例子：1.用户登录了自己的银行页面 http://mybank.com，http://mybank.
  • 在项目中遇到一情况让困扰了半天，同一张PNG8图片为何部份图标在IE6中消失呢？当时一度怀疑是cache或hosts问题反反复复开关浏览器结
  • Python 类的继承详解Python既然是面向对象的，当然支持类的继承，Python实现类的继承比JavaScript简单。Parent类
  • 常有新手问我该怎么备份数据库，下面介绍3种备份数据库的方法：（1）备份数据库文件MySQL中的每一个数据库和数据表分别对应文件系统中的目录和
  • 本文实例讲述了Python写入CSV文件的方法。分享给大家供大家参考。具体如下：# _*_ coding:utf-8 _*_#xiaohei
  • 本方法是基于文本密度的方法，最初的想法来源于哈工大的《基于行块分布函数的通用网页正文抽取算法》，本文基于此进行一些小修改。约定： 
  • 本文实例讲述了Python通过for循环理解迭代器和生成器。分享给大家供大家参考，具体如下：迭代器可迭代对象通过 for…in… 循环依次拿
  • 今天早上到现在，一直在搞一个很愚蠢的问题，竟然一直没发现 如果$str=""; $str = "$str-$s
  • 本脚本为本人在性能测试过程中编写，用于对进程状态的监控，也可以用于日常的监控，适用性一般，扩展性还行# -*- coding: UTF-8
  • I. 前言在前面的一篇文章PyTorch搭建LSTM实现时间序列预测（负荷预测）中，我们利用LSTM实现了负荷预测，但我们只是简单利用负荷预
  • 本文给出了几个表单常用的js验证函数，有检查、\等特殊字符的，有检查是否含有空格，检查是否为Email 地址，也有检查是否是小数或负数的，检
  • 需求说明：将单个或者多个Excel文件数据进行去重操作，去重的列可以通过自定义制定。开始源码说明之前，先说明一下工具的使用过程。1、准备需要
  • 0. 学习目标单链表只有一个指向直接后继的指针来表示结点间的逻辑关系，因此可以方便的从任一结点开始查找其后继结点，但要找前驱结点则比较困难，
  • 创建一些工具创建工具是帮助他人的一种很好的方式，而且不用考虑太多复杂的问题或 API 设计。你可以开发一个你最喜欢的框架或平台的模板。你可以
  • 在当今用户的显示器越来越大的今天，之前的1024*768固宽布局有点越来越不合时宜，对大屏幕的用户而言，两侧空空的留白给人第一眼的印象是严重
  • FCKeditor为一开源多功能在线Web编辑器。官方网站：http://www.fckeditor.net/。相关安全文件参看：《在.ne
  • 有关 Web 字体的话题正在增多，对 Web 设计师来说，他们并不关注技术细节，不管是 TrueType 的 Hinting 技术
  • 一年一度的双十一就快到了，各种砍价、盖楼、挖现金的口令将在未来一个月内充斥朋友圈、微信群中。玩过多次双十一活动的小编表示一顿操作猛如虎，一看
  • 经常会遇到下载的文件或电子书，名字中间都包含了一些网址信息，实际使用中由于名字太长不方便，下面的脚本使用正则表达式来对目录下的所有文件重命名
手机版 网络编程 asp之家 www.aspxhome.com