一、vue路由自動(dòng)加載
思路
使用統(tǒng)一規(guī)則命名路由文件名词疼，通過(guò)webpack方法require.context方法對(duì)文件進(jìn)行讀取俯树，動(dòng)態(tài)生成路由數(shù)據(jù)
使用方法
//param(路徑，是否遍歷子文件夾內(nèi)文件贰盗，匹配文件正則)
let r = require.context('./pages',true,/.vue/)
r.keys()//返回遍歷的文件路徑數(shù)組
r(key).default//路由文件輸出內(nèi)容
二许饿、按組件異步載入vuex
思路
按module劃分store，在組件中定義變量標(biāo)記是否需要vuex管理狀態(tài)舵盈。
使用vue插件方式陋率，在插件用使用Vue.mixin方法全局注入組件
在beforeCreate鉤子中判斷變量，動(dòng)態(tài)引入并注冊(cè)（store.registerModule）store
核心代碼
var vuexState = {
install (vue){
vue.mixin({
beforeCreate:function(){
if(this.$options.isVuex){
let name = this.$options.name
import("../store/module/"+name).then((res)=>{
this.$store.registerModule(name,res.default)//注冊(cè)模塊名稱秽晚、注冊(cè)store
})
}
}
})
}
}
export default vuexState
三瓦糟、dll打包優(yōu)化
思路
使用webpack.DllPlugin將第三方包進(jìn)行預(yù)處理
使用webpack.DllReferencePlugin在正式打包時(shí)配置不需要處理的第三方包
相關(guān)代碼
webpack.dll.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry:{
vendor:['vue/dist/vue.esm.js','vue-router']
},
output:{
path:path.join(__dirname,'./static/js'),
filename:'[name].dll.js',
library:'[name]_library'
},
plugins:[
new webpack.DllPlugin({
path:path.join(__dirname,'.','[name]-manifest.json'),
name:'[name]_library'
})
]
}
webpack.prod.conf.js
webpack.DllReferencePlugin({
contet:path.join(__dirname,"..")
manifest:require("./vendor-manifest.json")
})
