记录一次vue3+vite项目的优化

b端项目，前期工期短，性能优化上的工作延后处理，项目第一期上线后，着手优化。

# build 视图分析依赖文件 vite使用rollup-plugin-visualizer插件,分析依赖文件

import visualizer from 'rollup-plugin-visualizer'
export default ({ mode }) => {
  return defineConfig({
    build: {
      rollupOptions: {
        plugins: [
          visualizer({ 
              open: true
          })
        ],
        
      }
    },
   
}

优化前,build后的dist文件高达7.4MB：

1，首先是工具类lodash，占了5%多。

-- 改用改用lodash-es,按需加载。

结果：整个项目体检减少了0.5m

2，echart

-- 按需引入，本来项目也只用到了折线图，曲线区，以及饼状图 参考：echarts.apache.org/handbook/zh…

结果：整个项目体检减少了1.3m（echart真重啊，可以考虑换更轻量级的可视化工具。）

3，vuedraggable，vue的拖放组件

-- 经查资料，该拖放组件只是对sortable.js的vue封装，这里我的处理是卸载该组件，自己根据sortable对封装一个符合业务要求的拖放组件

结果:需求可以满足，项目体积减少0.2m

4，再次优化echart+拖放组件

-- echart采用cdn的方式引入 echarts.apache.org/zh/builder.… 官网有定制的cdn链接，只需要勾选我们要的功能，然后下载到我们本地。 同理，sortable.js的处理方式也是一样。由于拖放组件+echart并不是所有页面都有使用，这里使用动态加载js的方法。

/**
 * @method 动态加载js
 *  @param {String} url 需要加载的url地址
 *  @param {String} name 需要加载script的name
 */
export const dynamicScript = (url, name) => {
  return new Promise(resolve => {
    if (window[name]) {
      resolve(window[name])
    } else {
      let script = _createElement({
        tag: 'script',
        attr: {
          type: 'text/javascript'
        }
      })
      if (script.readyState) {
      //IE
      script.onreadystatechange = function() {
        if (
          script.readyState === "loaded" ||
          script.readyState === "complete"
        ) {
          script.onreadystatechange = null
          resolve(window[name])
        }
      };
    } else {
      //Others
      script.onload = function() {
        resolve(window[name])
      }
    }
      script.src = url
      document.getElementsByTagName("head")[0].appendChild(script)
    }
  })
}

结果是：echart+sorable.js不再打包到dist文件，进一步缩小体积，这次体检减少了1.4M。

5，monentJs改用dayJs。这里就不截图了。

最后，整个项目下来，比原来体积少了足足一半，各位大佬，该项目还有啥可以优化的，可以留言指点一下，不胜感激。

再记录个问题，vite打包有个问题，hash不是根据内容改变而改变的，其实就是webpack的conthash。到github上找了下，发现框架内确实无解,可以hack曲线救国,参照issue: github.com/vitejs/vite… 发现这个并不有效，各位大佬，有什么方法可以实现该功能。