• vue-cli项目打包体积太大，服务器网速也拉胯(100kb/s)，客户打开网站需要等十几秒！！！ 尝试cdn优化方案

    一、首先用插件webpack-bundle-analyzer查看自己各个包的体积

    插件用法参考之前博客

    vue-cli项目中，使用webpack-bundle-analyzer进行模块分析，查看各个模块的体积，方便后期代码优化

    二、发现有几个插件体积较大，有改成CDN引用的必要，先优化2个试试水

    比如 echarts、element-ui、element-variables.scss、lay-excel、moment

     

    第一次 npm run build 的体积是 4.29MB

     尝试优化，分为这几步

    1.在vue.config.js中webpack的externals忽略打包
    1.     externals: {
    2.       vue: 'Vue',
    3.       'element-ui': 'Element'
    4.     },
    2.在 module.exports - configureWebpack 里面写

    3.index.html里引入vue和element的cdn资源， index.html路径为public/index.html
    1.     <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet">
    2.     <script src="https://cdn.bootcss.com/vue/2.6.1/vue.js">script>
    3.     <script src="https://cdn.bootcss.com/element-ui/2.15.12/index.js">script>

    4.注释main.js的引用

    很好，成功了，但没完全成功，有坑！！

    坑1：vue.config.js 的externals配置， 饿了么取名一定要是Element ：    'element-ui': 'Element'

    如果是ElementUI会报错：Uncaught ReferenceError: ElementUI is not defined

    坑2：CDN引入vue一定要在element-ui前面

    坑3：element-ui的css 明明改成引用cdn ，element-variables怎么还那么大

    排查了下 本地引用没有注释干净

    @import "~element-ui/packages/theme-chalk/src/index";     这句要注释

    5.再次 npm run dev 看， 很好 element-variables占用没了 体积也小了。

    此时打包体积为 2.93

    有点意思~

    三、通过以上操作了解到CDN优化的流程，接下里搞定剩下的大体积插件

    基本只要修改3个地方

    1.vue.config.js 配置不打包的插件

    2.index.html 引入CDN资源

    3.main.js 注释本地引用

    1.     externals: {
    2.       vue: 'Vue',
    3.       'element-ui': 'Element',
    4.       echarts: 'echarts',
    5.       moment: 'moment'
    6.     },
    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    6.     <meta name="renderer" content="webkit">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    8.     <link rel="icon" href="<%= BASE_URL %>logo.png">
    9.     <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet">
    10.     <script src="https://cdn.bootcss.com/vue/2.6.1/vue.js">script>
    11.     <script src="https://cdn.bootcss.com/element-ui/2.15.12/index.js">script>
    12.     <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js">script>
    13.     <script src="https://cdn.staticfile.org/moment.js/2.29.4/moment.min.js">script>
    14.     <title><%= webpackConfig.name %>title>
    15.   head>
    16.   <body>
    17.     <div id="app">div>
    18.   body>
    19. html>

    1.echarts注释这句

    // import * as echarts from 'echarts'

    2.需要注意点是 moment只需要注释 // import moment from 'moment'

    因为项目中大量使用  this.$moment  ，示例：this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')，   还是要把 moment 赋值到this上

    3.如果因为eslint提示  'echarts' is not defined

    在上面加 // eslint-disable-next-line no-undef

    4.此时打包体积 1.63MB，比开始的4.29MB少了三分之二

    体积小那网站加载速度还不是飙升

    完工~

  • 相关阅读:
    用python selenium实现短视频一键推送
    ArcMap：第二届全国大学生GIS技能大赛(广西师范学院)详解-上午题
    java IO模型（BIO，NIO，AIO）
    空气运动-Air隐私协议
    LLM实战：LLM微调加速神器-Unsloth + LLama3
    LeetCode 热题 C++ 79. 单词搜索
    代码随想录算法训练营day60|84.柱状图中最大的矩形 |完结撒花~
    k8s容器启动不了，一直重启， 报红提示Not Ready
    我们该如何运营Facebook账号呢？
    [GWCTF 2019]枯燥的抽奖 mt_rand 伪随机数
  • 原文地址：https://blog.csdn.net/qq_18816201/article/details/133355214