webpack系类之代码分割和懒加载

webpack实现代码方式是主要是通过模块的引入方式

1.require.ensure

//进行代码分割
require.ensure(["lodash"],function(){
    var _ = require("lodash");//上边的require.ensure只会引入进来，但是并不会执行，再次require才会执行。
},"vendor")

或者：

if(page=="subPageA"){
    require.ensure(["./subPageA"],function(){
        var subPageA=require("subPageA");
    },"subPageA")
}else if(page=="subPageB"){
    require.ensure(["./subPageB"],function(){
        var subPageA=require("subPageB");
    },subPageB)
}

或者：

 require.ensure(["./subPageA","./subPageB"],function(){
        var subPageA=require("subPageA");
        var subPageB=require("subPageB");
    },common)
    //common表示这个模块的名字

但是仅仅这样配置并不能把公共js抽离出来，在多页面应用中可以通过new webpack.optimize.CommonsChunkPlugin这个plugin来实现，但是对于单页面来说，就需要借助require.include了

require.include("./moduleA")

if(page=="subPageA"){
    require.ensure(["./subPageA"],function(){
        var subPageA=require("subPageA");
    },"subPageA")
}else if(page=="subPageB"){
    require.ensure(["./subPageB"],function(){
        var subPageA=require("subPageB");
    },subPageB)
}

这样就会把公共模块moduleA给抽离出来

2.import

import与require.ensure最大的区别就是，他在引入的时候会直接执行，而不需要在此require了

import("./subPageA").then(function(){

})

但是这样打包出来的是没有chunkname的，怎么添加chunkname呢？需要webpack3+的魔法注释

import(/*webpackChunkName:"subPageA"*/"./subPageA").then(function(){

})

3 .异步加载公共模块

var webpack=require("webpack")
var path=require("path")


module.exports={
    entry:{
        "pageA":"./src/pageA",
        "pageB":"./src/pageB",
        "vendor":["lodash"]
    },
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:"[name].bundle.js",
        publicPath:"./dist/",
        chunkFilename:"[name].chunk.js"
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({
           async:"async-common",
           //要一部提取公共模块，可以不用指定name,
           children:true,
           //children表示并不仅仅从当前页面抽离公共代码，当前页面的子页面也要抽取
           minChunks:2

        })
    ]
}

pageA.js:

import * as _ from "lodash"
var page = "subpageA"
 if(page==-"subpageA"){
     import(/*webpackChunkName:"subpageA"*/"./subpageA").then(function(subpageA){
        console.log("subpageA");
     })
 }else if(page==-"subpageB"){
    import(/*webpackChunkName:"subpageB"*/"./subpageB").then(function(subpageB){
       console.log("subpageB");
    })
}

export default "pageA"

pageB:

import * as _ from "lodash"
var page = "subpageB"
 if(page==-"subpageA"){
     import(/*webpackChunkName:"subpageA"*/"./subpageA").then(function(subpageA){
        console.log("subpageA");
     })
 }else if(page==-"subpageB"){
    import(/*webpackChunkName:"subpageB"*/"./subpageB").then(function(subpageB){
       console.log("subpageB");
    })
}

export default "pageB"