webpack提取公共代码

最新推荐文章于 2024-09-23 16:25:31 发布

simoonQian

最新推荐文章于 2024-09-23 16:25:31 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/weixin_40814356/article/details/79823794

web前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何使用Webpack的CommonsChunkPlugin插件来提取公共代码，以减少代码冗余并提高加载速度。通过实例展示了不同场景下的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学了webpack的提取公共代码。记录一下：

为什么要提取公共代码，简单来说，就是减少代码冗余，提高加载速度。

这里要用到两个插件：

commonChunkPlugin
webpack.optimize.commonsChunkPlugin

配置：plugins：[new webpack.optimize.commonsChunkPlugin(option)]
option里面是一个json，配置如下

options.name: chunk的名称
options.filename: 公用代码打包后的名称
options.minChunks: 可以是数字、函数、特殊字符
options.chunks: 提取代码范围
options.children
options.deepChildren
options.asyne

使用场景：单页面应用，单页面应用+第三方依赖，多页面应用+第三方以来+代码生成

继续创建文件，且npm init初始化

pageA 依赖subPageA，subpageB，lodash

import './subpageA.js';
import './subPageB';
import * as _ from 'lodash';
export default 'pageA';

subpageA 依赖moduleA

import './moduleA'
export default 'subpageA';

subpageB也依赖moduleA

import './moduleA'
export default 'subpageB';

webpack.config.js配置如下：

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

module.exports = {
    entry: {
        pageA: './src/pageA'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name:'common',
            minChunks: 2,
            // chunks: ['moduleA', 'moduleB']
        })
    ]
}

命令行输入webpack打包。

这时候，就会生成文件如下：

这时候公共代码就被打包了。

可是针对多entry单页面是不能打包的，在src中新增加一个pageB

代码如下;

import './subpageA';
import './subPageB';
import * as _ from 'lodash';

export default 'pageB';

webpack.config.js代码如下

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

module.exports = {
    entry: {
        pageA: './src/pageA',
        pageB: './src/pageB',
        vender: ['lodash']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name:'common',
            minChunks: 2,
            // 选择提取moduleA和moduleB的公共代码
            chunks: ['moduleA', 'moduleB']
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vender', 'mainfest'],
            minChunks: Infinity
        })
    ]
}