首先是UI设计师对图片进行一次压缩,到了前端工程师手上再进行一次压缩,推荐网站https://tinypng.com/。本人使用的技术栈时VUE和webpack,代码压缩在webpack中能够配置,再也不详述。javascript
若是按照vue-cli的正常配置进行打包,打包出来的包会很是大,即便进行了压缩。打包出来的东西分为2部分,第一部分是vue组件,以及业务逻辑部分;第二部分为插件打包,例如vue,vue-router,axios,vuex,vueScroll等插件。html
/*1. vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },{ path: '/index', name: 'Index', component: resolve => require(['@/components/index'],resolve) },{ path: '/about', name: 'about', component: resolve => require(['@/components/about'],resolve) }
// 2.下面2行代码,没有指定webpackChunkName,每一个组件打包成一个js文件。(官方网站推荐) /* const Home = () => import('@/components/home') const Index = () => import('@/components/index') const About = () => import('@/components/about') */ // 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块 const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home') const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index') const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
/* 3.组件懒加载: webpack提供的require.ensure() */ { path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') }, { path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') }, { path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }
须要注意的是:require或者import该组件进行懒加载后,不能在路由外在进行import该组件,不然webpack打包不生效。前端
具体作法: 在index.html中加入vue,vuex等资源vue
在vue资源管理文件build文件夹中的webpack.base.conf.js,此js文件是vue基础打包配置,在此配置中加入java
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'mui': 'mui' },
externals中的键值对格式为 'aaa' : 'bbb', 其中,aaa表示要引入的资源的名字,bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,vue-router为VueRouter.webpack
3. 因为本公司的服务器有点low,即便图片进行了2次压缩,可是图片加载的速度仍是慢,此时的加载效果是,html加载出来了,图片还在一帧一帧的往下加载,很low。解决办法:图片尚未加载出来的时候,不显示,加载出来以后,有动画效果的显示出来。ios
地址: 本人做品www.mofamg100.cn,欢迎各位指点web