浅谈vue项目打包优化策略

2023-09-07 20:53:04 71

使用vue-cli部署生产包时，发现资源包很大，打包后的vendor.js达到了1.4M，这已经很大了，而且会影响到首屏加载。那么，怎么优化呢？

1.组件按需加载

这是首先可以优化的点。如果频繁使用了第三方组件/UI库，如我的项目中经常同时使用了element-ui,mint-ui,echarts等组件库，如果全部引入，项目体积非常大，这时可以按需引入组件。

示例如下：

1.1element-ui

首先，安装babel-plugin-component：

npminstallbabel-plugin-component-D

然后，将.babelrc修改为：

{
"presets":[["es2015",{"modules":false}]],
"plugins":[
[
"component",
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]
]
}

然后引入部分组件，这样一来，就不需要引入样式了，插件会帮我们处理。

//main.js
importVuefrom'vue'
import{Dialog,Loading}from'element-ui'

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading=Loading.service
//然后正常使用组件

1.2mint-ui

由于mint-ui是element-ui的移动端组件，所以它的使用和引入几乎和element-ui一样。

首先，安装babel-plugin-component：

npminstallbabel-plugin-component-D

然后，将.babelrc修改为：

{
"presets":[
["es2015",{"modules":false}]
],
"plugins":[["component",[
{
"libraryName":"mint-ui",
"style":true
}
]]]
}

然后引入部分组件

//main.js
importVuefrom'vue'
import{Toast,MessageBox}from'element-ui'

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading=Loading.service
//然后正常使用组件

注意，element-ui和mint-ui不能同时在.babelrc中进行插件设置，这种情况下，依然可以按需引入，但是不要在.babelrc中配置，在引入的地方同时引入css即可。

1.3echarts

首先安装babel-plugin-equire

npmibabel-plugin-equire-D

然后，在.babelrc文件中添加该插件

{
"plugins":[
//otherplugins
...

"equire"
]
}

创建一个js文件

//echarts.js
//eslint-disable-next-line
constecharts=equire([
'tooltip',
'candlestick',
'bar',
'line',
'axisPointer',
'legend',
'grid'
])
exportdefaultecharts

//业务组件，引入echarts
importechartsfrom'@/assets/lib/echarts'
//使用与以前一样

按需加载echarts

解决vue-cli首屏加载慢的问题

2.路由懒加载

这里需要一个插件

vue-router官方推荐syntax-dynamic-import插件，不过它要求同时安装@bable/core^7.0.0，如果你安装了babel-core6，是会有版本冲突的。我的做法如下

npminstallbabel-plugin-syntax-dynamic-import--save-dev(^6.18.0)

//router.js
constlogin=()=>import('@/components/login')
constrouter=newVueRouter({
routes:[
{path:'/login',component:login}
]
})

还有一种魔法注释用法

有时候我们想把某个路由下的所有组件都打包在同个异步块(chunk)中。只需要使用命名chunk，一个特殊的注释语法来提供chunkname(需要Webpack>2.4)。

constFoo=()=>import(/*webpackChunkName:"group-foo"*/'./Foo.vue')

3.异步组件

如果组件在页面加载时不需要，只在调用时用到，这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同

//template


//script
components:{
test:()=>import('./test')//将组件异步引入，告诉webpack，将该部分代码分割打包
},
methods:{
clickTest(){
this.showTest=!this.showTest
}
}

4.图片的压缩合并

无损压缩图片：https://www.nhooo.com/softs/605425.html

如有可能，将图片制作成精灵图

5.CDN加速

在index.html中引入cdn资源

...

...

修改build/webpack.base.conf.js

module.exports={
context:path.resolve(__dirname,'../'),
entry:{

app:'./src/main.js'
},
externals:{

'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex',
'vue-resource':'VueResource'
},
...
}

修改src/main.jssrc/router/index.js注释掉import引入的vue,vue-resource

//importVuefrom'vue'
//importVueResourcefrom'vue-resource'
//Vue.use(VueResource)

6.压缩代码

vue-cli已经使用UglifyJsPlugin插件来压缩代码，可以设置成如下配置：

newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false,
drop_console:true,
pure_funcs:['console.log']
},
sourceMap:false
})

其中sourceMap:false是禁用除错功能。

如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好，但会大大增加整体资源包的体积，所以将其禁用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

浅谈vue项目打包优化策略

热门推荐

随机推荐