Vue项目优化策略

1、生成打包报告

​ 打包后,更直观的发现项目中的问题

​ ①通过vue-cli的命令行生成报告

vue-cli-service build --report

​ ②使用vueui面板查看报告

​ build中运行项目即可查看

2、通过vue.config.js修改webpack的默认配置

由于vuecli3.0默认隐藏了所有webpack的配置项,可在根目录中自定义vue.config.js配置

3、为开发模式和发布模式指定不同的打包入口

默认模式下,Vue项目的开发模式和发布模式,共用一个打包的入口(main.js)

​ ①开发者模式入口文件:main-dev.js
​ ②发布模式的入口文件:main-prod.js

4、configureWebpack和chainWebpack

作用相同,都是修改webpack配置,前者通过链式编程来修改webpack配置,后者通过操作对象的形式来修改。

5、通过externals加载外部CDN资源

默认情况下,通过import语法导入的第三方依赖包,最终会被打包到同一个文件中,从而导致打包成功后,单文件体积过大的问题。

6、路由懒加载

在打包构建项目时,JavaScript包会变得非常大,影响页面加载。把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43774332/article/details/125046952