• vue项目打包优化的方法

    1.按需加载第三方库

    例如 ElementUI、lodash 等

    a, 装包

    npm install babel-plugin-component -D

    b, babel.config.js

    1. module.exports = {
    2.   "presets": [
    3.     "@vue/cli-plugin-babel/preset"
    4.   ],
    5.   "plugins": [
    6.     [
    7.       "component",
    8.       {
    9.         "libraryName": "element-ui",
    10.         "styleLibraryName": "theme-chalk"
    11.       }
    12.     ]
    13.   ]
    14. }

    c, main.js

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

    换成

    import './plugins/element.js'

    element.js

    1. import Vue from 'vue'
    2. 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'
    3.  
    4. Vue.use(Button)
    5. Vue.use(Form)
    6. Vue.use(FormItem)
    7. Vue.use(Input)
    8. Vue.use(Header)
    9. Vue.use(Container)
    10. Vue.use(Aside)
    11. Vue.use(Main)
    12. Vue.use(Menu)
    13. Vue.use(Submenu)
    14. Vue.use(MenuItemGroup)
    15. Vue.use(MenuItem)
    16. Vue.use(Breadcrumb)
    17. Vue.use(BreadcrumbItem)
    18. Vue.use(Card)
    19. Vue.use(Row)
    20. Vue.use(Col)
    21. Vue.use(Table)
    22. Vue.use(TableColumn)
    23. Vue.use(Switch)
    24. Vue.use(Tooltip)
    25. Vue.use(Pagination)
    26. Vue.use(Dialog)
    27. Vue.use(Tag)
    28. Vue.use(Tree)
    29. Vue.use(Select)
    30. Vue.use(Option)
    31. Vue.use(Cascader)
    32. Vue.use(Alert)
    33. Vue.use(Tabs)
    34. Vue.use(TabPane)
    35. Vue.use(Steps)
    36. Vue.use(Step)
    37. Vue.use(CheckboxGroup)
    38. Vue.use(Checkbox)
    39. Vue.use(Upload)
    40. Vue.use(Timeline)
    41. Vue.use(TimelineItem)
    42.  
    43. // 把弹框组件挂着到了 vue 的原型对象上，这样每一个组件都可以直接通过 this 访问
    44. Vue.prototype.$message = Message
    45. Vue.prototype.$confirm = MessageBox.confirm

    效果图 

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

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

    通过form lodash 搜索 哪处用到

    例如此处的 1.

     

    换成 

    按需导入 

    效果图

    2.移除console.log

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

     babel.config.js

    1. const prodPlugins = []
    2.  
    3. if (process.env.NODE_ENV === 'production') {
    4.   prodPlugins.push('transform-remove-console')
    5. }
    6.  
    7. module.exports = {
    8.   presets: ['@vue/cli-plugin-babel/preset'],
    9.   plugins: [
    10.     [
    11.       'component',
    12.       {
    13.         libraryName: 'element-ui',
    14.         styleLibraryName: 'theme-chalk'
    15.       }
    16.     ],
    17.     ...prodPlugins
    18.   ]
    19. }

     效果图

    3. Close SourceMap

    生产环境关闭 功能

    vue.config.js

    1. module.exports = {
    2.   productionSourceMap: false
    3. }

     效果图

     

    4. Externals && CDN

    Vue项目打包编译优化方案
    pdf 0星 超过10%的资源 56KB
    下载

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

    vue.config.js

    1. module.exports = {
    2.   productionSourceMap: false,
    3.   chainWebpack: (config) => {
    4.     config.when(process.env.NODE_ENV === 'production', (config) => {
    5.       const cdn = {
    6.         js: [
    7.           'https://cdn.staticfile.org/vue/2.6.11/vue.min.js',
    8.           'https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js',
    9.           'https://cdn.staticfile.org/axios/0.18.0/axios.min.js',
    10.           'https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js',
    11.           'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',
    12.           'https://cdn.staticfile.org/quill/1.3.4/quill.min.js',
    13.           'https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js'
    14.         ],
    15.         css: [
    16.           'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css',
    17.           'https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css',
    18.           'https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css',
    19.           'https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css'
    20.         ]
    21.       }
    22.       config.set('externals', {
    23.         vue: 'Vue',
    24.         'vue-router': 'VueRouter',
    25.         axios: 'axios',
    26.         echarts: 'echarts',
    27.         nprogress: 'NProgress',
    28.         'nprogress/nprogress.css': 'NProgress',
    29.         'vue-quill-editor': 'VueQuillEditor',
    30.         'quill/dist/quill.core.css': 'VueQuillEditor',
    31.         'quill/dist/quill.snow.css': 'VueQuillEditor',
    32.         'quill/dist/quill.bubble.css': 'VueQuillEditor'
    33.       })
    34.       config.plugin('html').tap((args) => {
    35.         args[0].isProd = true
    36.         args[0].cdn = cdn
    37.         return args
    38.       })
    39.     })
    40.   }
    41. }

    public/index.html

    1. DOCTYPE html>
    3.  
    5.   
    6.   
    7.   
    8.   
    9.   </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <%= htmlWebpackPlugin.options.title %></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  
    10.   <% if(htmlWebpackPlugin.options.isProd){ %>
    11.     <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    12.       
    13.       <% } %>
    14.         <% } %>
    16.  
    18.   
    19.     We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
    20.         Please enable it to continue.
    21.   
    22.   
    23.   
    24.   <% if(htmlWebpackPlugin.options.isProd){ %>
    25.     <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    26.       
    27.       <% } %>
    28.         <% } %>
    30.

    效果图

     

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

    vue.config.js

    1. module.exports = {
    2.   chainWebpack: config => {
    3.     config.when(process.env.NODE_ENV === 'production', config => {
    4.       config.set('externals', {
    5.         './plugins/element.js': 'ELEMENT'
    6.       })
    7.       config.plugin('html').tap(args => {
    8.         args[0].isProd = true
    9.         return args
    10.       })
    11.     })
    12.   }
    13. }

     public/index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
    8.   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    9.   <title>
    10.     <%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统
    11.   title>
    12.   <% if(htmlWebpackPlugin.options.isProd){ %>
    13.     
    14.     <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    15.  
    16.     
    17.     <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js">script>
    18.     <% } %>
    19. head>
    20.  
    21. <body>
    22.   <noscript>
    23.     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
    24.         Please enable it to continue.strong>
    25.   noscript>
    26.   <div id="app">div>
    27.   
    28. body>
    29.  
    30. html>

    效果图

    5.路由懒加载的方式

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import Login from '../components/Login.vue'
    4. Vue.use(VueRouter)
    5.  
    6. const routes = [
    7.   {
    8.     path: '/',
    9.     redirect: '/login'
    10.   },
    11.   {
    12.     path: '/login',
    13.     component: Login
    14.   },
    15.   {
    16.     path: '/Home',
    17.     component: () => import('../components/Home.vue'),
    18.     redirect: '/welcome',
    19.     children: [
    20.       {
    21.         path: '/welcome',
    22.         component: () => import('../components/Welcome.vue')
    23.       },
    24.       {
    25.         path: '/users',
    26.         component: () => import('../components/user/Users.vue')
    27.       },
    28.       {
    29.         path: '/rights',
    30.         component: () => import('../components/power/Rights.vue')
    31.       },
    32.       {
    33.         path: '/roles',
    34.         component: () => import('../components/power/Roles.vue')
    35.       },
    36.       {
    37.         path: '/categories',
    38.         component: () => import('../components/goods/Cate.vue')
    39.       },
    40.       {
    41.         path: '/params',
    42.         component: () => import('../components/goods/Params.vue')
    43.       },
    44.       {
    45.         path: '/goods',
    46.         component: () => import('../components/goods/List.vue')
    47.       },
    48.       {
    49.         path: '/goods/add',
    50.         component: () => import('../components/goods/Add.vue')
    51.       },
    52.       {
    53.         path: '/orders',
    54.         component: () => import('../components/order/Order.vue')
    55.       },
    56.       {
    57.         path: '/reports',
    58.         component: () => import('../components/report/Report.vue')
    59.       }
    60.     ]
    61.   }
    62. ]
    63.  
    64. const router = new VueRouter({
    65.   routes
    66. })
    67.  
    68. router.beforeEach((to, from, next) => {
    69.   // to 要访问的路径
    70.   // from 从哪里来的
    71.   // next() 直接放行，next('/login') 表示跳转
    72.   // 要访问 /login 的话那直接放行
    73.   if (to.path === '/login') return next()
    74.   const tokenStr = window.sessionStorage.getItem('token')
    75.   // token 不存在那就跳转到登录页面
    76.   if (!tokenStr) return next('/login')
    77.   // 否则 token 存在那就放行
    78.   next()
    79. })
    80.  
    81. export default router

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

    记一次react前端项目打包优化的方法
    pdf 0星 超过10%的资源 292KB
    下载

    1. 部署到 Nginx

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

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

    1. module.exports = {
    2.   devServer: {
    3.     proxy: {
    4.       '/api': {
    5.         target: 'http://127.0.0.1:8888',
    6.         changeOrigin: true
    7.       }
    8.     }
    9.   }
    10. }

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

    1. const router = new VueRouter({
    2.   mode: 'history',
    3.   base: '/shop/',
    4.   routes: [
    5.     // ...
    6.     {
    7.       path: '*',
    8.       component: NotFound
    9.     }
    10.   ]
    11. })

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

    修改 Nginx 配置

    1. http {
    2.     server {
    3.         listen       80;
    4.  
    5.         location / {
    6.             # proxy_pass https://www.baidu.com;
    7.             root   html;
    8.             index  index.html index.htm;
    9.             try_files $uri $uri/ /index.html;
    10.         }
    11.         location /api {
    12.             # 重写地址
    13.             # rewrite ^.+api/?(.*)$ /$1 break;
    14.             # 代理地址
    15.             proxy_pass http://127.0.0.1:8888;
    16.             # 不用管
    17.             proxy_redirect off;
    18.             proxy_set_header Host $host;
    19.             proxy_set_header X-Real-IP $remote_addr;
    20.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    21.         }
    22.     }
    23. }

    重启服务

    nginx -s reload

    访问 localhost 查看下效果吧

    1. 开启 Gzip 压缩

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

    1. const CompressionWebpackPlugin = require('compression-webpack-plugin')
    2.  
    3. module.exports = {
    4.   configureWebpack: config => {
    5.     if (process.env.NODE_ENV === 'production') {
    6.       config.plugins = [...config.plugins, new CompressionWebpackPlugin()]
    7.     }
    8.   }
    9. }

    Nginx 中开启 gzip 即可

     

  • 相关阅读:
    基于Springboot的特产销售平台设计与实现毕业设计源码091036
    《计算几何》学习笔记
    SSM框架具体功能实现
    存储器的分类
    CMU15-445 format\clang-format\clang-tidy 失败
    [C++] 哈希的模拟实现---闭散列法、开散列法（上）
    竞赛 车道线检测(自动驾驶 机器视觉)
    【node进阶】深度解析Koa框架---路由|静态资源|获取请求参数
    dubbo漫谈（一）
    NLP（2）--Transformer
  • 原文地址：https://blog.csdn.net/weixin_68531033/article/details/126342877