目录

• • 前言
  • 优化vue3构建的几点措施
  • • 采用CDN
    • 压缩JS
    • 按需加载
    • • 按需加载vxe-table
      • 按需加载element-plus
  • 总结

前言

vue3应用上线后，一直受困于加载过慢，昨天终于坐下来做些优化。本想切换到webpack打包，但还是坚持了vite。

优化vue3构建的几点措施

采用CDN

build中配置vue和element-plus为外部依赖:

rollupOptions: {external: ["vue", "element-plus", "vue-demi"],plugins: [dynamicImportVars(),externalGlobals({vue: "Vue","element-plus": "ElementPlus",// 👇 配置 vue-demi 全局变量 👇"vue-demi": "VueDemi",})],},

然后，插件配置里导入相应的CDN：

import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
importToCDN({modules: [autoComplete("vue"),autoComplete("axios"),{name: "vue-demi",var: "VueDmi", //根据main.js中定义的来path: "https://npm.elemecdn.com/vue-demi@0.13.11"},{name: "element-plus",var: "ElementPlus", //根据main.js中定义的来path: "https://npm.elemecdn.com/element-plus@2.2.27/dist/index.full.js",css: "dist/index.css"},{name: "@element-plus/icons-vue",var: "ElementPlusIconsVue", //根据main.js中定义的来path: 'https://npm.elemecdn.com/@element-plus/icons-vue@2.0.10/dist/index.iife.min.js'}]}),

这样，构建后，就会自动更新index.html为:

压缩JS

viteCompression({verbose: true,disable: false,threshold: 10240,algorithm: 'gzip',ext: '.gz',}),

需要配合nginx里的gzip配置。

按需加载

按需加载vxe-table

styleImport({libs: [{libraryName: "vxe-table",esModule: true,ensureStyleFile: true,resolveComponent: name => `vxe-table/es/${name}`,resolveStyle: name => `vxe-table/es/${name}/style.css`}]}),

按需加载element-plus

先安装相应插件：

npm install -D unplugin-vue-components unplugin-auto-import

然后配置：

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

总结

基本就是上述几招了，但实际过程遇到vxe-table打包后的各种错误问题，还得好好研究。随着前端框架的复杂度增加，打包是一个很重要，很严肃的问题。