zoukankan      html  css  js  c++  java
  • webpack散记---代码分割 和 懒加载

    webpack methods
    ES 2015 Loader spec
    (1)webpack methods方法
        require.ensure  //可以动态加载依赖
            []:dependencies   //dependencies
            callback
            errorCallback
            chunkName
            require.include
    
    (2)ES 2015 Loader Spec
        System.import()  -> import()
        import() -> Promise
        import().then()
        import(
          /*webpackChunkName:async-chunk-name*/
         /*webpackMode:lazy*/
         modulename
        )
    (1)在pageA.js
         require.ensure([],function(){//只是加载进来
            var _ = require('lodash')//调用
            _.join(['1','2'],'3')
         },'vendor') //vender是定义的额模块名
    
        export default 'pageA'
    
    (2)动态加载进来
         if(page ==='a'){
             require.ensure(['./subPageA'],function(){
                   var a = require('./subPageA')
             })
         }else if(page === 'b'){
          //---------
        }
    
       或者 、、
       require.ensure(['./a','./b'],function(){
         console.log('--------')
       })

    //多个地方都用到moduleA的话,可以提前把他引入进来
    require.include('./moduleA')

    //修改发布路径
    webpack.config.js
    output :{
    padth:path.resolve(__dirname,'./dist'),
    publicPath:'./dist/',//动态加载的路径
    }


    (3)动态import加载 引入进来直接就执行了
    import(/*webpackChunkName:'appA'*/'./subPage').then(function(sub){
    //相当于重新指定chunkname的名字
    })


    这个webpack 告一段落 ,后面 有时间继续更新
  • 相关阅读:
    Javascript事件处理进阶
    Restful API设计指南
    Git&GitHub
    Linux补充
    堡垒机
    Python发送邮件
    js获取当前页面url网址信息
    高并发的秒杀系统
    CMDB开发
    Tornado
  • 原文地址:https://www.cnblogs.com/lmxxlm-123/p/9456267.html
Copyright © 2011-2022 走看看