当我们项目开发到后期的时候,可能就要谈及到去优化下项目了,比如经常碰见的:打包体积过大,首屏加载太慢,还有性能的问题,这其实跟我们平时开发的时候息息相关,代码写的怎么样还得是看个人了。下面就介绍一下优化方式
1. 按需加载UI组件库
Vue2项目中一般搭配element-ui比较多,这里就以这个为例;其他ui库的也都是一样的,官网应该都有按需引入说明
咱们一般使用element-ui的时候,直接在min.js全局引入了 ,如下:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
这样引入使用起来确实是方便,想用什么用什么,缺点就是,我们在项目中没用到的组件也都会打包进去,这样就会导致打包体积变大,所以改成按需引入就按照下方步骤:
①首先安装开发时插件:
npm install babel-plugin-component -D
②在babel.config.js添加如下
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[