vue项目开发优化
1 按需引入ui组件
比如elementUI,不要直接在main.js中全局引入所有的组件,可以根据elementui的说明文件,按需引入
项目中的组件
2 异步引入路由组件
使用
{ path:'/index', name:'index', component:resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk') }
vue自带的异步方式 //路由懒加载,打包之后,注释中webpackChunkName一样的会被打包到同一个js文件中
component: resolve => require(['@/components/index'], resolve)
es提案的import()
component: () => import(/* webpackChunkName: "indexChunk" */ '@/components/index.vue'’
webpack提供的require.ensure()
resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk')
路由懒加载时,路由不能动态传值
这段代码将组件分类到名为indexChunk的chunk中,在网站加载时会自动解析需要加载那个chunk,虽然分别打包在总体积会变大(同chunk将打包同一个js文件),但是减少了资源请求,从而提升了速度。
resolve=>require(["@/components/index"],resolve)
3 源码优化
为item设置唯一的key值,减少watch数据,细分vue组件,按需加载图片,图片多的时候可以使用懒加载,SSR服务端渲染;
4 css sourceMap
sourceMap: process.env.NODE_ENV === "production" ? false : true,
// 是否构建样式地图,false 将提高构建速度
5 如果上面的操作之后,还是慢可以这样设置,在项目打包的时候不打包第三方库,直接使用cdn进行引入,可以大大减少打包文件的体积
需要这样的在设置:demo:vue为例
externals:{'Vue':'Vue',/*这个名字要与main.js中import的vue同步*/'moment':'moment'},
使用vue-cli3需要这样设置:
configureWebpack: (config) => { Object.assign(config,{ externals:{'Vue':'Vue'} }); }
其他的第三方插件都可以这样设置,以达到减少打包文件的大小,提升运行速度的效果
在index.html中手动引入cdn上的vue.js
<script src="http://cdn.bootcss.com/vue/2.6.10/vue.min.js" type=''text/javascript'></script>
上面的方法,需要手动修改index.html,在开发环境注释掉,在打包的时候才需要引入,可以使用htmlWebpackPlugin
<!-- 通过htmlwebpackplugin动态注入脚本和样式 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"> <% } %>
引入css
<!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style"> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet"> <% } %>
在vue.config.js中的配置
chainWebpack: (config) => { if(process.env.NODE_ENV==='production'){ config.plugin('html') .tap(args => { args[0].cdn = cdn; return args; }) } }
const cdn = { // css: ['xxx.css', 'sss.js'], js: ['http://cdn.bootcss.com/vue/2.6.10/vue.min.js'] }