vue路由自动加载、按组件异步载入vuex以及dll优化

一、vue路由自动加载

介绍：

使用统一规则命名路由文件名，通过webpack方法require.context方法对文件进行读取，动态生成路由数据

使用方法：

//param(路径，是否遍历子文件夹内文件，匹配文件正则)
let r = require.context('./pages',true,/.vue/)
r.keys()//返回遍历的文件路径数组
r(key).default//路由文件输出内容

 

二、按组件异步载入vuex

介绍：

按module划分store，在组建中定义白能量标记是否需要vuex管理状态。 使用vue插件方式，在插件中使用Vue.mixin方法全局注入组件 在beforeCreate钩子中判断变量，动态引入并注册（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)//注册模块名称、注册store
                    })
                }
            }
        })
    }
}
export default vuexState

 

三、dll打包优化

介绍：

使用webpack.DllPlugin将第三方包进行预处理 使用webpack.DllReferencePlugin在正式打包时配置不需要处理的第三方包

核心代码：

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")
})