浅谈Vue项目优化心得

 

1、打包优化

• 提取组件的 CSS 到单独到文件
• 屏蔽 sourceMap
• 开启 gzip 压缩
• 公共库使用cdn外链
  • 打包vender时不打包vue、vuex、vue-router、axios等，换用国内的 bootcdn、unpkg 直接引入到根目录的 index.html 中。并把上述文件配置在externals中。

vue.config.js

const Gzip = require("compression-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
// vue.config.js
module.exports = {
	transpileDependencies: [
		//'vue-echarts',
		'resize-detector'
	],
    devServer: {
		disableHostCheck: true,
	},
	publicPath:'/',
	productionSourceMap:false,
	configureWebpack:config =>{
		//打包时过滤
		if (isProduction) {
			config.externals = {
				'vue': 'Vue',
				'vue-router': 'VueRouter',
			}
		}
		if(isProduction){
    		return {
    			plugins:[
    				new Gzip({
						test:/\.js$|\.html$|\.css/,
						threshold:102400,
						deleteOriginalAssets: false
					}),
					new UglifyJsPlugin({
						uglifyOptions: {
							compress: {
								//warnings: false,
								drop_debugger: true,//关闭debug
								drop_console: true
							}
						},
						sourceMap: true,//报错信息
						cache: true,
						parallel: true
					})
				]
			}
		}
	}
}

index.html

    <!-- built files will be auto injected -->
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <!-- CND -->
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script>

2、源码优化

• template
  • 不要在模板里面写过多表达式
  • v-for 增加 key
  • v-show、v-if 的使用
  • 善用 v-once
  • 图片资源按需加载（vue-lazyload）
  • 善于运用事件代理
• script
  • 在created钩子里面请求数据
  • Promise.all() 并发请求
  • 使用 Object.freeze() 来取消 Observer观察
  • 减少watch的数据，慎用 deep watch
  • 善用 web Storage（sessionStorage、localStorage）
• 组件缓存（keep-alive）
• 第三方库按需加载（不用加载整个库）
• 路由组件懒加载 import()

router.js 路由懒加载

{
			path: '/home',
			name: 'home',
			meta: {check: false},
			component: resolve=> require.ensure([],()=>resolve(require('../views/home/home')),'home')
		},
		{
			path: '/pc/index',
			name: 'pcIndex',
			meta: {check: false},
			component: resolve=> require.ensure([],()=>resolve(require('../views/pc/index')),'index')
		},

UI按需引用

import {
    LocaleProvider, Icon, Modal, Button, Radio, Avatar, BackTop, Menu, Pagination, DatePicker, Form, Input, InputNumber,
    Select, Upload, Card, Table, Tabs, Progress, Drawer, message, popconfirm, spin,Collapse,Timeline
} from 'ant-design-vue';
import layout from "ant-design-vue/lib/layout"
Vue.use(layout);

Vue.use(Collapse);//不能单独在需要的页面引用
Vue.use(Timeline);//不能单独在需要的页面引用
Vue.use(LocaleProvider);
Vue.use(Icon);
Vue.use(Modal);
Vue.use(Button);
Vue.use(Radio);
Vue.use(Avatar);
Vue.use(BackTop);
Vue.use(Menu);
Vue.use(Pagination);
Vue.use(DatePicker);
Vue.use(Form);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Select);
Vue.use(Upload);
Vue.use(Card);
Vue.use(Table);
Vue.use(Tabs);
Vue.use(popconfirm);
Vue.use(Drawer);
Vue.use(Progress);

//需要的页面才引用
 import {Row, Col} from 'ant-design-vue';
 components: {
            ARow: Row,
            ACol: Col,
        },

3、用户体验优化

• fastclick 防止300ms延迟
• loading
• 骨架屏加载
• 服务端渲染（SSR）

npm install fastclick -S
//main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效

//引入
import FastClick from 'fastclick'
//初始化FastClick实例。在页面的DOM文档加载完成后
FastClick.attach(document.body)