[webpack 学习系列] lazy loading 懒加载

lazy loading，中文翻译为懒加载，也叫按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

好的例子：文章的 Code splitting 部分有两个关于懒加载的例子可以学习学习

---

例子：
src/index.js

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
    const button = document.createElement('button');
    const br = document.createElement('br');
    button.innerHTML = 'Click me and look at the console!';
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.appendChild(br);
    element.appendChild(button);

    button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
        const print = module.default;

        print();
    });

    return element;
}

document.body.appendChild(component());

src/print.js

console.log('The print.js module has loaded! See the network tab in dev tools...');

export default () => {
    console.log('Button Clicked: Here\'s "some text"!');
};

webpack.config.js

const path =  require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js'
    },
    devtool: "source-map",
    devServer: {
        contentBase: './dist',
        open: true,
        hot: true,
        hotOnly: true
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: "[name].js",
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

执行 yarn build （即 webpack）打包后的结果如下图：

打包后生成了三个 chunk：

1. app.bundle.js 下主要包含了 src/index.js 的逻辑；
2. vendors~app.js 下主要包含了从 node_modules 下引入的模块，这里主要是 loadsh；
3. 因为 print.js 是通过 import语法导入的，所以这里默认生成了 print.js chunk。

加下来我们打开网页后查看 network 如图显示：

初始化页面后加载了 vendors~app.js 和 app.bundle.js
当我们点击 button 按钮后，页面请求加载了 print.js：

通过这里例子我们发现，print.js 文件初始化的时候并不会加载，只有在用户点击按钮后才会加载，这样的实现便是懒加载。