zoukankan      html  css  js  c++  java
  • 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")
    })
  • 相关阅读:
    基于 MySQL 5.6 keepalived的双主搭建
    keepalived.conf 配置文件小结
    keepalived小结
    能不能利用复制报错,让从库停在同一个复制的位置上?
    复制介绍、复制的实用价值
    复制相关参数学习笔记--master上的参数
    计数排序
    双向链表
    约瑟夫问题
    单链表中重复元素的删除
  • 原文地址:https://www.cnblogs.com/xiewangfei123/p/14752023.html
Copyright © 2011-2022 走看看