代码分离

此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

有三种常用的代码分离方法：

• 入口起点：使用 entry 选项手动分离代码。
• 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
• 动态导入：通过模块的内联函数调用来分离代码。

entry

将js分割为多个，利用浏览器多线程，同时加载多个js文件，以此来提升效率，但同时此方法也将带来坑，会将重复的模块都打包。需要结合CommonsChunkPlugin来去重复。

image.png

app.js

import _ from 'lodash';
console.log('Hello app module');

main.js

import _ from 'lodash';
console.log('Hello main module');

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        main: './src/main.js',
        app: './src/app.js'
    },

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: '代码分离'
        }),
    ],

    devServer: {
        contentBase: './dist'
    }
}

image.png image.png

两个模块都将lodash打包了，导致重复代码，文件过大。

分离重复代码

在entry分离的步骤中，增加插件CommonsChunkPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        main: './src/main.js',
        app: './src/app.js'
    },

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: '代码分离'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common'
        })
    ],

    devServer: {
        contentBase: './dist'
    }
}

image.png

动态导入

使用ES6语法import导入或者使用webpack提供的require.ensure.

image.png

app.js

let button = document.createElement('button');
button.innerHTML = '点我';
button.onclick = () => {
    import(/* webpackChunkName: "lodash" */ 'lodash').then(function(_){
        console.log(_.join(['Hello', 'webpack'], ' '));
    }).catch(function(error){
        console.error('error', error);
    });
}

document.body.appendChild(button);

通过注释指明模块的名字 /* webpackChunkName: "lodash" */
webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/app.js',

    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    devServer: {
        contentBase: './dist'
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: 'Dy import'
        })
    ]
}

当点击按钮后才请求lodash模块

image.png