如何加快 vue 页面加载速度之打包优化

vue 打包简单优化

打包 js 文件体积过大

1. 多见于 main.js

• 可以将整包引入的 js、css 文件改为获取静态资源，脱离打包。js 插件需要配置 vue.config.js ， configureWebpack.externals {组件名: 别名}, 开启全局引用。
• 可以改变插件引入方式， 将 import App from './App.vue' 改为 const App = () => import(./App.vue')

2. 按组件配置按需引入。

打包 js 文件体积小，并且多

• 可以使用为打包文件起相同名字的方式组合引入

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

总文件量太大

1. 把图片改成静态资源
2. 多页面吧