代码分离

此特性能够把代码分离到不同的 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容