淺談vue項(xiàng)目打包優(yōu)化策略
使用vue-cli部署生產(chǎn)包時(shí)，發(fā)現(xiàn)資源包很大，打包后的vendor.js達(dá)到了1.4M，這已經(jīng)很大了，而且會(huì)影響到首屏加載。那么，怎么優(yōu)化呢？
1.組件按需加載
這是首先可以優(yōu)化的點(diǎn)。如果頻繁使用了第三方組件/UI庫，如我的項(xiàng)目中經(jīng)常同時(shí)使用了 element-ui, mint-ui,echarts等組件庫，如果全部引入，項(xiàng)目體積非常大，這時(shí)可以按需引入組件。
示例如下：
1.1 element-ui
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后，將.babelrc 修改為：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
然后引入部分組件，這樣一來，就不需要引入樣式了，插件會(huì)幫我們處理。
// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'
Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用組件
1.2 mint-ui
由于mint-ui是element-ui的移動(dòng)端組件，所以它的使用和引入幾乎和element-ui一樣。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后，將.babelrc 修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
然后引入部分組件
// main.js
import Vue from 'vue'
import { Toast, MessageBox } from 'element-ui'
Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用組件
注意，element-ui和mint-ui不能同時(shí)在.babelrc中進(jìn)行插件設(shè)置，這種情況下，依然可以按需引入，但是不要在.babelrc中配置，在引入的地方同時(shí)引入css即可。
1.3 echarts
首先安裝babel-plugin-equire
npm i babel-plugin-equire -D
然后，在.babelrc文件中添加該插件
{
"plugins": [
// other plugins
...
"equire"
]
}
創(chuàng)建一個(gè)js文件
// echarts.js // eslint-disable-next-line const echarts = equire([ 'tooltip', 'candlestick', 'bar', 'line', 'axisPointer', 'legend', 'grid' ]) export default echarts // 業(yè)務(wù)組件，引入echarts import echarts from '@/assets/lib/echarts' // 使用與以前一樣
按需加載echarts
解決vue-cli首屏加載慢的問題
2.路由懶加載
這里需要一個(gè)插件
vue-router官方推薦syntax-dynamic-import插件，不過它要求同時(shí)安裝@bable/core^7.0.0，如果你安裝了babel-core6，是會(huì)有版本沖突的。我的做法如下
npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)
// router.js
const login = () => import('@/components/login')
const router = new VueRouter({
routes: [
{ path: '/login', component: login }
]
})
還有一種魔法注釋用法
有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用 命名 chunk，一個(gè)特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
3.異步組件
如果組件在頁面加載時(shí)不需要，只在調(diào)用時(shí)用到，這時(shí)可以使用異步組件的寫法。僅僅是引入和組件注冊寫法不同
// template
<test v-if="showTest"></test>
// script
components: {
test: () => import('./test') // 將組件異步引入，告訴webpack，將該部分代碼分割打包
},
methods:{
clickTest () {
this.showTest = !this.showTest
}
}
4.圖片的壓縮合并
無損壓縮圖片：http://m.fzitv.net/softs/605425.html
如有可能，將圖片制作成精靈圖
5.CDN加速
在index.html中引入cdn資源
... <body> <div id="app"> </div> <!-- built files will be auto injected --> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> </body> ...
修改 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.js src/router/index.js 注釋掉import引入的vue,vue-resource
// import Vue from 'vue' // import VueResource from 'vue-resource' // Vue.use(VueResource)
6.壓縮代碼
vue-cli已經(jīng)使用UglifyJsPlugin 插件來壓縮代碼，可以設(shè)置成如下配置：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
},
sourceMap: false
})
其中sourceMap: false是禁用除錯(cuò)功能。
如果設(shè)為true，在部署包中會(huì)生成.map結(jié)尾的js文件。它用于在代碼混淆壓縮的情況下仍可進(jìn)行調(diào)試。這個(gè)功能雖好，但會(huì)大大增加整體資源包的體積，所以將其禁用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 中 ref 和 reactive 的區(qū)別及用法解析
在Vue.js中,ref主要用于創(chuàng)建響應(yīng)式的引用,通過.value屬性來訪問和修改值,特別適用于需要頻繁更改整個(gè)值的場景,而reactive則用于創(chuàng)建深度響應(yīng)的對象或數(shù)組,本文給大家介紹Vue.js 中 ref 和 reactive 的區(qū)別及用法,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue之“} expected“和“at-rule or selector ex
這篇文章主要介紹了vue之“} expected“和“at-rule or selector expected“報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3和ts封裝axios以及使用mock.js的相關(guān)資料,文章通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue3+ts+vant移動(dòng)端H5項(xiàng)目搭建的實(shí)現(xiàn)步驟
本文主要介紹了vue3+ts+vant移動(dòng)端H5項(xiàng)目搭建，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要給大家介紹了在vue中如何通過iframe方式加載本地的vue頁面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下2023-06-06
Vue3響應(yīng)式高階用法之shallowRef()的使用
在Vue3框架中,shallowRef()為開發(fā)者提供了細(xì)粒度的響應(yīng)式控制能力,特別適用于處理深層嵌套對象或需要部分響應(yīng)式的場景,本文就來詳細(xì)的介紹一下,感興趣的可以了解一下2024-09-09
vueRouter--matcher之動(dòng)態(tài)增減路由方式
這篇文章主要介紹了vueRouter--matcher之動(dòng)態(tài)增減路由方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli開發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)
下面小編就為大家分享一篇vue-cli開發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue中v-html圖片過大導(dǎo)致溢出的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
利用vue3+ts實(shí)現(xiàn)管理后臺(tái)（增刪改查）
這篇文章主要介紹了利用vue3+ts實(shí)現(xiàn)管理后臺(tái)(增刪改查),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10