【上海前端】webpack代码分割和懒加载

本帖最后由叶夜葉于 2019-7-5 12:17 编辑

转载自：https://blog.csdn.net/a4_9527/article/details/81193408

webpack代码分割和懒加载实现方式：

1.webpack methods

[JavaScript] 纯文本查看 复制代码

require.ensure（['']， callback，chunkName）

[JavaScript] 纯文本查看 复制代码

// []路径可省略 
//  var _ = require('lodash') 必须
require.ensure(['lodash'], function() {
    var _ = require('lodash')
}, 'vendor')

ES 2015 Loader Spec

[JavaScript] 纯文本查看 复制代码

import() // 返回promies对象 
import().then()
import(
    /* webpackChunkName: async-chunk-name */
    /* webpackMode: lazy */
    modulename
)

使用场景

其他模块：
公共模块：moduleA.js代码

[JavaScript] 纯文本查看 复制代码

export default 'moduleA'

子模块：subPageA.js代码

[JavaScript] 纯文本查看 复制代码

import './moduleA'
console.log('subPage:::')
export default 'subPageA'

子模块：subPageB.js代码

[JavaScript] 纯文本查看 复制代码

import './moduleA'
export default 'subPageB'

场景1.分离业务代码和第三方依赖

1.pageA.js（lodash为第三方依赖）

[JavaScript] 纯文本查看 复制代码

require.ensure(['lodash'], function() {
    var _ = require('lodash')
}, 'vendor')

// import()方式

import(/* webpackChunkName:'vendor' */'lodash').then(function(lodash) {
        console.log(lodash)
    })

在使用import（）方式时会报如下错误：

[JavaScript] 纯文本查看 复制代码

webpack dynamic import出错: SyntaxError: ‘import’ and ‘export’ may only appear at the top level

此处需要安装babel插件：

[JavaScript] 纯文本查看 复制代码

 "plugins": [
        "syntax-dynamic-import"
    ]

2.webpack.config.js配置：

[JavaScript] 纯文本查看 复制代码

var webpack = require('webpack')
var path = require('path')

module.exports = {
    entry: {
        // app: './src/app.js',
        'pageA': './src/pageA'       
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js',
        publicPath: './dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: ['env']
                    // }
                },
                exclude: '/node_modules/',
            }      
        ]
    },
}

使用场景2：分离业务代码 和 业务公共代码 和 第三方依赖

1.pageA.js

// moduleA为业务公共代码 公共代码块需在入口文件提前引入
require.include('./moduleA')

// subPageA：业务代码
require.ensure(['./subPageA'], function() {
        var subPageA = require('./subPageA')
    }, 'subPageA')

// lodash第三方依赖
require.ensure(['lodash'], function() {
    var _ = require('lodash')

1
2
3
4
5
6
7
8
9
10
11
12

2.webpack.config.js配置：

[JavaScript] 纯文本查看 复制代码

var webpack = require('webpack')
var path = require('path')

module.exports = {
    entry: {
        // app: './src/app.js',
        'pageA': './src/pageA',
        // 'pageB': './src/pageB',
        // 'vendor': ['lodash']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js',
        publicPath: './dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: ['env']
                    // }
                },
                exclude: '/node_modules/',
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader/useable'
                    },
                    {
                        loader: 'css-loader'
                    } 
                ]
            }
        ]
    },

}

使用场景3：分离业务代码和业务公共代码(异步提取) 和第三方依赖

1.pageA.js代码

[JavaScript] 纯文本查看 复制代码

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'

2.pageB.js代码

[JavaScript] 纯文本查看 复制代码

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'

3.webpack.config.js代码

[JavaScript] 纯文本查看 复制代码

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',
        chunkFilename: '[name].chunk.js',
        publicPath: './dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: ['env']
                    // }
                },
                exclude: '/node_modules/',
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader/useable'
                    },
                    {
                        loader: 'css-loader'
                    } 
                ]
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
           async: 'async-common',
           minChunks: 2,
           children: true,
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest'],
            minChunks: Infinity
        }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'vendor',
        //     minChunks: Infinity
        //  })
    ]
}

帐号		自动登录	找回密码
密码			加入黑马

【上海前端】webpack代码分割和懒加载

0 个回复